/* Höhen im Produktlisting */
.lb_title {
	height:43px;
	overflow:hidden;
}
.lb_image {
	/* Bugfix 2026-09-09: Bilder (<a><img>) sind sitzeweit per Basis-Regel "img{display:block}"
	   block-level, ohne flex/float stapeln sie sich also immer untereinander statt
	   nebeneinander. Bei Produkten mit mehreren Bildern (PRODUCTS_IMAGE_SYSTEM/_PLUS/_ZUB +
	   Hauptbild, z.B. AHK+Elektrosatz-Kombiartikel) sprengte das die vorher feste
	   height:160px - das ueberschuessige Bild lief unter die Box hinaus und ueberlappte die
	   danebenstehende Beschreibung. Jetzt: Flex-Reihe mit Umbruch statt fixer Hoehe, waechst
	   mit der tatsaechlichen Bilderzahl statt abzuschneiden. */
	display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;
	min-height:160px; /* hier die Hoehe an die Thumbnailgröße der Produktbilder anpassen */
}
.lb_image img {
	max-height:160px; /* hier die Höhe an die Thumbnailgröße der Produktbilder anpassen */
}
.lb_shipping {
	height:18px;
	overflow:hidden;
}
.lb_rating {
	height:20px;
	overflow:hidden;
}
.lb_price {
	height:22px;
	overflow:hidden;
}
@media (min-width: 768px) {
.lb_price {
	height:29px;
}
}
@media screen and (max-width: 991px) {
  .special_price .small_price {
    display:none;
  }
}
/* EU-Cookie unten rechts (https://www.modified-shop.org/forum/index.php?topic=37218.msg338521#msg338521) */
/*
#eucookielaw {
    bottom: 0;
    margin-bottom: 0;
    position: fixed;
    right: 0;
    width: 20%;
	min-width: 350px;
    z-index: 999999;
}
*/
/* EU-Cookie unten gesamte Breite (https://www.modified-shop.org/forum/index.php?topic=37218.msg338719#msg338719) */
/*
#eucookielaw {
    bottom: 0;
	left:0;
    margin-bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 999999;
    text-align: center;
}
*/
/* EU-Cookie siehe Forum - danke Hanspeter (https://www.modified-shop.org/forum/index.php?topic=37218.msg338392#msg338392) */
#eucookielaw{display:none;
}
/* Systemfehlermeldung siehe Forum - danke web28 (https://www.modified-shop.org/forum/index.php?topic=37218.msg339064#msg339064) */
.errormessage {
  border:solid #DCA7A7 1px;
  padding:10px;
  font-size:13px !important;
  line-height:17px;
  color:#A94442;
  background-color:#F2DEDE ;
  margin-bottom:10px;
}
.errormessage.shopsystem {
  margin-top:38px;
  margin-bottom:-32px;
}
.errormessage ul li {
  margin-left:10px;
}
/* INFO MESSAGES */
.infomessage {
  border: 1px solid #b2dba1;
  padding: 10px;
  background-color: #d4ebcb;
  margin-bottom: 10px;
  line-height: 17px;
  color:#3C763D;
}
/* siehe Forum - danke Timm (https://www.modified-shop.org/forum/index.php?topic=37218.msg338385#msg338385) */
img {
	display: block;
	height: auto;
	max-width: 100%;
}
.cat_description img {
	margin-right: 20px;
}
.nav img {
	display: inline;
}
/* einfaches responsives Menü */
nav.responsive-nav {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    padding-bottom: 30px;
}
nav.responsive-nav .menu-header {
        position: relative;
		height:70px;
        padding-top: 20px;
		color: inherit;
		font-size:1.2em;
        text-transform:uppercase;
    }
nav.responsive-nav #back {
        position: absolute;
        left: -50px;
        top: 10px;
        transition: left .2s;
}
nav.responsive-nav #back.active {
            left: 10px;
            transition: left .2s;
        }
nav.responsive-nav .menu {
        position: absolute;
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0;
        position: absolute;
        left: -100%;
        right: 100%;
        transition: left .2s;
        z-index: 0;
        top: 70px;
        bottom: 30px;
}
nav.responsive-nav .menu.active {
            z-index: 1;
            left: 0;
            transition: left .2s;
            right: 0%;
        }
nav.responsive-nav .menu .next {
	background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            padding: 10px 20px;
            border-left-style: solid;
            border-left-width: 1px;
			border-color:inherit;
        }
nav.responsive-nav .menu ul {
            list-style: none;
            padding: 0;
}
nav.responsive-nav .menu ul li {
                position: relative;
}
nav.responsive-nav .menu ul li a {
                    display: block;
                    padding: 10px 15px;
					border-bottom-style: solid;
					border-bottom-width: 1px;
					border-color:inherit;
}
nav.responsive-nav a:hover, nav.responsive-nav a:focus {
	text-decoration:none;
}
nav.responsive-nav li.Selected a.active {
	background-color: rgba(0, 0, 0, 0.1);
}
nav.responsive-nav #home {
	position: absolute;
	right: 10px;
	top: 10px;
}
/* Superfishmenü */
@media screen and (min-width: 992px) {
/* Superfishmenü Megakategorien */
#main.navbar-nav > li.mega {
    position: static;
}
	ul.mega {
		left: 0 !important;
		right: 0 !important;
        width: 100%;
		padding:8px;
	}
	ul.mega.level2 > li{
        width: 100%;
	}
	 li.mega.level3 {
		width:25%;
		margin-left:0;
	} /* 4 col */
	.tab-content {
		width:100%;
		padding-top: 10px;
        display: inline-block;
	}
	.tab-pane ul {
        padding:0;
		margin:0;
	}
	ul.mega li, li.mega.level3 {
		float:left;
		display:inline;
        border-radius: 4px;
	}
	li.mega.level4 {
		float:none;
		margin-left:0;
	}
	.tab-pane ul li a {
    	display: block;
    	padding: 3px 20px;
	}
	.tab-pane ul li a:hover, .tab-pane ul li a:focus, li.mega.level2 {
    	background-color: #eeeeee;
    	background-image: linear-gradient(to bottom, #eeeeee, #eeeeee);
    	background-repeat: repeat-x;
        text-decoration: none;
	}
	.cyborg .tab-pane ul li a:hover, .cyborg .tab-pane ul li a:focus, .cyborg li.mega.level2,
	.superhero .tab-pane ul li a:hover, .superhero .tab-pane ul li a:focus, .superhero li.mega.level2,
	.darkly .tab-pane ul li a:hover, .darkly .tab-pane ul li a:focus, .darkly li.mega.level2 {
    	background-color: #505050;
    	background-image: linear-gradient(to bottom, #505050, #505050);
	}
	.tab-pane ul > .active > a, .tab-pane ul .active > a:hover, .tab-pane ul .active > a:focus {
    	outline: 0 none;
    	text-decoration: none;
	}
    #main.nav li.dropdown:hover > ul.dropdown-menu, #main.nav li.level1.mega:hover li.level2:first-child ul {
      display: block;
    }
	.dropdown-submenu>.dropdown-menu {
		top:0;left:80%;
		margin-top:-6px;margin-left:-1px;
		-webkit-border-radius:0 6px 6px 6px;
		-moz-border-radius:0 6px 6px 6px;
		border-radius:0 6px 6px 6px;
	}
	div.canvasmenu.container-fluid {
		display:none;
	}
	#main.navbar-nav {
		float:none;
	}
}
@media (max-width: 991px) {
	div.fullmenu.container-fluid {
		display:none;
	}
}
.caret-right {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 4px dashed;
  border-left: 4px solid \9;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
/* Ende Superfish */
/* Navbar Top */
.top .navbar-default {
    background-color: inherit;
    border-color: inherit;
}
.top.navbar {
	margin-bottom:0;
}
.top .navbar-toggle.navbar-left {
  float: left;
}
.top .navbar-nav > li, .top2 .navbar-nav > li {
	float: left;
}
@media screen and (max-width: 767px) {
  .top span.glyphicon, .top2 .dropdown-toggle {
    font-size: 1.2em;
  }
.top .navbar-nav {
    margin: 0;
}
}
/* Autocomplete-Box von Suche */
.suggestionsBox {
    position: absolute;
    right: 15px;
    z-index: 99999;
}
.suggestionList, .toggle_cart, .toggle_wishlist {
    max-height: 600px;
    overflow: auto;
	width: 460px;
}
.suggestionList li a.autocomplete .autocomplete_image {
    display: block;
    height: 40px;
    margin-right: 10px;
    overflow: hidden;
    width: 40px;
}
@media screen and (max-width: 767px) {
.toggle_wishlist {
	right: -80px;
}
}
.toggle_cart li, .toggle_wishlist li {
	display: inline-block;
	width: 100%;
}
@media screen and (max-width: 500px) {
.suggestionList li a.autocomplete .autocomplete_image {
    display: none !important;
  }
.suggestionList, .toggle_cart, .toggle_wishlist {
	width: 100% !important;
}
li.cart, li.wishlist {
	position: static;
}
.toggle_cart, .toggle_wishlist {
	position: absolute;
	right: 0;
	top: 88px;
}
}
.suggestionList li a.autocomplete {
    display: inline-block;
    width: 100%;
}
/* Ganz kleine Bildschirme */
@media screen and (max-width: 500px) {
#myCarousel {
    display: none !important;
  }
#checkoutnavigation .col-xs-6, .listingbox.col-xs-6, .listingrow .col-xs-4, .listingrow .col-xs-8, .pd_content .col-xs-6 {
	width:100%;
	}
.pd_more_images .col-xs-3 {
	width:50%;
	}
.view-buttons{
	display:none;
}
}
/* Gototop Button */
.go2top {
font-size: 1.2em;
position: fixed;
bottom: 5px;
right: 5px;
display: none;
z-index:99999;
}
@media (max-width: 991px) {
	.go2top {
		right:-80px;
	}
}
/* Skip-Link (WCAG 2.4.1) - unsichtbar bis sie per Tab-Taste fokussiert wird */
.bk-skip-link{
	position:absolute;left:8px;top:-60px;z-index:100000;
	background:var(--bk-navy,#152a63);color:#fff;padding:10px 18px;border-radius:0 0 6px 6px;
	font-family:var(--bk-sans,inherit);font-weight:700;text-decoration:none;
	transition:top .15s ease;
}
.bk-skip-link:focus{top:0;color:#fff;text-decoration:none;outline:3px solid var(--bk-gold,#e79a2e);outline-offset:2px;}
/* Copyright */
span.cop_magenta {
  color:#B0347E;
}
span.cop_grey {
  color:#6D6D6D;
}
.copyright, .parseTime {
  margin:0 auto;
  text-align:center;
  color:#666;
  font-size:11px;
}
.copyright {
  margin: -40px 0 0 0;
	min-height: 40px;
}
.copyright a {
  text-decoration:none;
}
.mod_copyright {
margin-top: 20px;
}
/* Bestsellercarousel */
#bsCarousel img{
	max-height: 110px;
}
#bsCarousel .prod_title{
	display:inline-block;
	height: 45px;
	padding:5px;
	overflow: hidden;
}
/* Unveil-Thumbnails bei deaktiviertem Javascript ausblenden */
.thumbnail img.unveil, img.unveil {
	display:none;
}
/* AGB-Fenster im Checkout */
div.agbframe {
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    height: 130px;
    overflow: auto;
    padding: 5px;
}
/* miscellaneous */
#categorymenu .panel, #layout_navbar .list-group {
	margin-bottom:0;
	margin-top:0;
}
#main_container {
	padding-top: 20px;
	padding-bottom: 20px;
}
.mt {
	margin-top: 20px;
}
.mb {
	margin-bottom: 10px;
}
.mini {
    font-size: 85%;
}
#checkoutnavigation .desc {
display:block;
font-size: 13px;
line-height: 17px;
min-height: 34px;
}
.bs.form-inline .form-control, .bs.form-inline .form-group {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}
.list-group-item.active > a, .list-group-item.active:hover > a, .list-group-item.active:focus > a {
    color: inherit;
}
.clear {
clear:both;
height:0;
line-height:0;
}
.special_price {
    color: #bc0000;
}
.small_price {
	font-size:0.6em;
}
.box_image img, .lb_image img {
	max-width: 200px;
}
#layout_footer {
	padding-top: 10px;
	padding-bottom: 40px;
}
.dropdown-menu.toggle_cart, .dropdown-menu.toggle_wishlist {
	padding-top:0;
	padding-bottom:0;
	margin-top:0;
}
#layout_footer .box-heading {
display:block;
font-size:1.2em;
margin-bottom: 10px;
border-bottom:2px groove;
float:none;
}
.filter_bar .glyphicon{
	font-size:1.6em;
}
#modal .carousel-control {
    background-image: none;
	color: inherit;
}
.pd_fsk18 {
  background: transparent url(img/fsk18.png) no-repeat top center;
  height: 44px;
  width: 44px;
	position: absolute;
}
.pd_more_images img {
	max-height: 80px;
}
/* "Mehr Bilder"-Vorschaubilder auf der Produktdetailseite (Nutzerfeedback 2026-09-08):
   vorher unstyled - img-responsive (display:block) liess die Bilder mangels Flex/Grid-
   Kontext einzeln untereinander stapeln statt als Reihe. Feste Thumbnail-Groesse + Flex-Wrap. */
.pd_more_images .thumbnail {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}
.pd_more_images .thumbnail h4 {
	flex: 0 0 100%;
	width: 100%;
}
.pd_more_images .thumbnail a.cbimages {
	display: inline-block;
	line-height: 0;
}
.pd_more_images .thumbnail img.unveil {
	display: block;
	width: 80px;
	height: 80px;
	max-height: 80px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--bk-border);
	margin-right: 0 !important;
	transition: border-color .15s ease;
}
.pd_more_images .thumbnail a.cbimages:hover img.unveil {
	border-color: var(--bk-navy);
}
/* EU-Cookie */
#cookie a {
	color:#000; text-decoration:none;
}
/* GROSSSCHREIBUNG Angebote und Neue Artikel in den Menüs */
.up {
	text-transform: uppercase;
}
/* Ausrichtung Sternchenbild */
.rating_stars img {
    margin-top: -5px;
}
/* Überschrift */
h1.well.well-sm {
	font-size:25px;
}
/* meine Icons */
@font-face {
  font-family: 'my_icons';
  src: url('./fonts/my_icons.eot');
  src: url('./fonts/my_icons.eot#iefix') format('embedded-opentype'),
       url('./fonts/my_icons.woff2') format('woff2'),
       url('./fonts/my_icons.woff') format('woff'),
       url('./fonts/my_icons.ttf') format('truetype'),
       url('./fonts/my_icons.svg?#my_icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "my_icons" !important;
}

.icon-news:before { content: '\e800'; } /* '' */
.icon-cart:before { content: '\e801'; } /* '' */
.icon-waves:before { content: '\e802'; } /* '' */
.icon-money:before { content: '\f0d6'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
.icon-user-times:before { content: '\f235'; } /* '' */
.icon-opencart:before { content: '\f23d'; } /* '' */

/* Breite der Modal-Box */
@media screen and (min-width: 768px) {
.modal-dialog {
	width:745px;
}
}
/* Schalter vorheriges/nächstes Bild in Modalbox */
#show-previous-image.carousel-control, #show-next-image.carousel-control {
	height:50%;
	top:20%;
	/* jetzt <button>-Elemente statt href-loser <a> (WCAG 2.1.1 - vorher per Maus
	   klickbar, aber nicht per Tastatur fokussierbar/ausloesbar); Browser-Default-
	   Button-Chrome zuruecksetzen, damit sie optisch identisch zu vorher bleiben */
	border:0;background-color:transparent;padding:0;cursor:pointer;
}
#show-previous-image.carousel-control:focus-visible, #show-next-image.carousel-control:focus-visible {
	outline:3px solid var(--bk-gold,#e79a2e);outline-offset:2px;
}
/* Sternchen für Pflichtfelder */
.stern input[type="text"], .stern input[type="password"], .stern input[type="email"], .stern input[type="tel"], .stern select, .stern textarea {
    width: 97%;
	float:left;
}
.ib {
	display:inline-block;
}
#cart_quantity .input-group {
	width:160px;
}
.lr_buttons .btn, .lb_buttons .btn {
    margin-bottom: 10px;
}
.markProductOutOfStock {
  display:inline-block;
  padding-left:5px;
}
/* IE10 und Windows Phone 8 Hack */
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


/* =========================================================================================
   FAMILIEN-PIKTOGRAMM-LEITSYSTEM - Redesign 2026 v4 (ersetzt den v3-Schaltplan-Block)

   <!--
   THESIS: Der Shop begruesst wie ein freundliches Wegeleitsystem am Campingplatz, nicht
   wie ein Konstruktionsplan - verweigert die kalte, technische Schaltplan-Optik der
   Vorversion, die als "zu technisch fuer Endkunden" abgelehnt wurde.
   OWN-WORLD: Warmes Creme statt Papier-Grau, Navy + Bordeaux (Marke) plus warmes
   Sonnengelb als dritter, freundlicher Akzent; runde Piktogramm-Embleme statt Knoten/
   Karten; Baloo 2 fuer Ueberschriften, Nunito fuer Flie&#223;text - beide rund und warm,
   keine Mono-Schrift mehr, keine Konstruktionsraster.
   STORY: Besucher fuehlt sich willkommen wie an einer freundlichen Wegweiser-Tafel,
   erkennt sein Anliegen an einem farbigen Piktogramm-Symbol und wird in drei einfachen
   Schritten zum passenden Teil gefuehrt.
   FIRST VIEWPORT: Warmes cremefarbenes Hero-Band, links eine freundliche flache
   Illustration (Auto mit Fahrradtraeger, Sonne, Straßenkurve) in Marken- und Akzentfarben,
   rechts eine warme Willkommens-Headline mit runden Pillen-Buttons.
   FORM: Familien-Piktogramm-Leitsystem, zugewiesener Index 3/7, seed key
   beeken-redesign-friendly-01.
   FINISH: unreviewed and undocumented is unfinished; this build ends with the finish
   review, the verdict, DESIGN.md, and every shipping raster carrying its provenance.
   -->
   ========================================================================================= */
html, body{overflow-x:hidden;}

:root{
  --bk-navy:#152a63;
  --bk-navy-dark:#0d1c46;
  --bk-burgundy:#7c1322;
  --bk-burgundy-dark:#5c0e19;
  --bk-gold:#e79a2e;
  --bk-gold-dark:#c07d1c;
  --bk-cream:#fdf6e9;
  --bk-cream-deep:#f8ecd4;
  --bk-border:#ecdfc2;
  --bk-text:#2c2716;
  --bk-text-muted:#6b6350;
  --bk-sans:'Nunito', Arial, sans-serif;
  --bk-display:'Baloo 2', 'Nunito', Arial, sans-serif;
}

.bk-home{
  position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  width:100vw;max-width:100vw;overflow-x:clip;
  font-family:var(--bk-sans);color:var(--bk-text);background:var(--bk-cream);
}
.bk-home *{box-sizing:border-box;}
.bk-inner{max-width:1240px;margin:0 auto;padding:0 32px;}
@media (max-width:767px){ .bk-inner{padding:0 18px;} }

.bk-home ::selection, .bk-finder-wrap ::selection{background:var(--bk-gold);color:var(--bk-navy-dark);}
.bk-home a:focus-visible, .bk-finder-wrap a:focus-visible,
.bk-home button:focus-visible, .bk-finder-wrap button:focus-visible,
.bk-home select:focus-visible, .bk-finder-wrap select:focus-visible,
.bk-home .bk-btn:focus-visible{outline:3px solid var(--bk-gold);outline-offset:2px;}

/* ---------- Cookie-Consent-Banner (eigene Loesung, 2026-09) ----------
   Ersetzt den alten reinen Hinweis-Banner (box_eu_cookie.html, nur "Einverstanden") -
   adaptiert von der bereits bei camping-preisbrecher.de umgesetzten Loesung, hier mit
   Beekens eigenen Design-Tokens statt hartcodierter Hex-Werte. */
.bk-cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:3000;
  background:#fff;border-top:1px solid var(--bk-border);
  box-shadow:0 -4px 20px rgba(44,39,22,.18);
  padding:18px 20px;font-family:var(--bk-sans);
}
.bk-cookie-inner{max-width:980px;margin:0 auto;}
.bk-cookie-banner h2{font-family:var(--bk-display);font-size:17px;font-weight:700;margin:0 0 8px 0;color:var(--bk-navy);}
.bk-cookie-banner p{font-size:13px;color:var(--bk-text);margin:0 0 12px 0;line-height:1.5;}
.bk-cookie-banner a{color:var(--bk-burgundy);text-decoration:underline;}
.bk-cookie-categories{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px 0;}
.bk-cookie-cat{
  flex:1 1 220px;background:var(--bk-cream);border:1px solid var(--bk-border);
  border-radius:14px;padding:10px 14px;
}
.bk-cookie-cat label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--bk-navy);cursor:pointer;}
.bk-cookie-cat input[type="checkbox"]{width:17px;height:17px;}
.bk-cookie-cat p{margin:4px 0 0 25px;font-size:12px;color:var(--bk-text-muted);}
.bk-cookie-actions,.bk-cookie-save{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;}
.bk-cookie-categories[hidden],.bk-cookie-actions[hidden],.bk-cookie-save[hidden]{display:none;}
.bk-cookie-btn{
  border-radius:999px;font-weight:700;font-size:13.5px;padding:10px 20px;
  border:2px solid transparent;cursor:pointer;line-height:1.2;font-family:var(--bk-sans);
  transition:background .18s ease-out,transform .18s ease-out;
}
.bk-cookie-btn-primary{background:var(--bk-burgundy);color:#fff;}
.bk-cookie-btn-primary:hover,.bk-cookie-btn-primary:focus{background:var(--bk-burgundy-dark);}
.bk-cookie-btn-outline{background:#fff;color:var(--bk-navy);border-color:var(--bk-border);}
.bk-cookie-btn-outline:hover,.bk-cookie-btn-outline:focus{background:var(--bk-cream);border-color:var(--bk-gold);}
@media (max-width:640px){
  /* 2026-09-10 (SEO-Audit): Banner nahm vorher fast den halben mobilen Viewport ein (3
     volle-Breite-Buttons untereinander). "Nur notwendige"/"Alle akzeptieren" muessen laut
     TDDDG/DSGVO gleich prominent bleiben (beide weiterhin .bk-cookie-btn-primary,
     nebeneinander in einer Reihe); "Auswahl anpassen" (Einstellungen, keine Entscheidung)
     wandert per order darunter in eine eigene Zeile. */
  .bk-cookie-banner{padding:14px 16px;}
  .bk-cookie-banner h2{font-size:15px;margin-bottom:6px;}
  .bk-cookie-banner p{font-size:12.5px;margin-bottom:10px;}
  .bk-cookie-actions,.bk-cookie-save{flex-wrap:wrap;gap:8px;}
  .bk-cookie-btn{flex:1 1 auto;padding:9px 14px;font-size:12.5px;text-align:center;}
  #bk-cookie-customize{order:3;flex-basis:100%;}
}

/* ---------- EU-Gewaehrleistungslabel Modal ---------- */
.bk-warranty-body{
  max-height:75vh;overflow-y:auto;text-align:center;background:var(--bk-cream);padding:20px;
}
.bk-warranty-link{padding-top:7px;font-weight:700;color:var(--bk-navy);}

/* ---------- Fusszeile: neue Kontakt-Spalte (Widerruf/Gewaehrleistung/Cookies) ---------- */
#layout_footer .footer-legal-link{
  color:#fff;font-weight:700;display:flex;align-items:center;gap:8px;
  margin:0 0 2px 0;font-size:13.5px;background:none;border:none;padding:12px 0;cursor:pointer;
  font-family:var(--bk-sans);text-align:left;border-radius:6px;
}
#layout_footer .footer-legal-link:hover,#layout_footer .footer-legal-link:focus{color:var(--bk-gold);text-decoration:underline;}
#layout_footer .footer-legal-link:focus-visible{outline:2px solid var(--bk-gold);outline-offset:2px;}
#layout_footer .footer-legal-link .glyphicon{color:var(--bk-gold);font-size:13px;}
#layout_footer .footer-kontakt-phone{margin:0 0 14px 0;font-size:13.5px;color:#dfe4f2;line-height:1.6;}
#layout_footer .footer-kontakt-phone a{color:#fff;font-weight:700;}

/* ---------- Kopf- und Fusszeile ---------- */
/* Hinweis (2026-09-08): die Selektoren hiessen vorher ".top .navbar-default" (mit
   Leerzeichen = Nachfahren-Kombinator) - im echten Markup stehen "top" und "navbar-default"
   aber als zwei Klassen auf demselben Element ("top nav navbar-default"), nie auf
   verschachtelten Elementen. Der Nachfahren-Selektor griff dadurch nie, wodurch Kasse/
   Merkzettel/Warenkorb im Kopfbereich mit der (unsichtbaren) Bootstrap-Standardfarbe auf
   dunklem Navy dargestellt wurden - erst beim Hover (eigene, korrekt greifende Regel weiter
   unten) wurden sie sichtbar. Fix: zusammengesetzter Selektor ohne Leerzeichen. */
.top.navbar-default,
#layout_navbar{background-color:var(--bk-navy) !important;border-color:var(--bk-navy) !important;}
.top.navbar{border-bottom:4px solid var(--bk-gold);}
.top.navbar-default .navbar-text,
#layout_navbar .breadcrumb_info{color:#e9edf7 !important;}
/* Startseite/Kasse/Merkzettel/Warenkorb (2026-09-09): waren reiner Bootstrap-Standardtext auf
   Navy, ohne die runde Pillenform, die sonst ueberall in diesem Design fuer klickbare
   Elemente steht (.bk-btn, .bk-hero-phone, Kategorie-Badges) - wirkte dadurch wie
   unfertig/generisch statt wie ein Teil desselben Designs. Gleiche "Outline-auf-Navy"-Sprache
   wie .bk-btn-outline uebernommen (transparent, heller Rand, Fuellung erst bei Hover/Aktiv),
   statt eine neue Variante zu erfinden. */
.top.navbar-default .nav-pills{margin:0;}
.top.navbar-default .nav-pills>li{float:left;}
.top.navbar-default .nav-pills>li+li{margin-left:8px;}
.top.navbar-default .nav-pills>li>a{
  color:#e9edf7 !important;font-weight:700;font-family:var(--bk-sans);
  border-radius:999px;border:2px solid rgba(255,255,255,.35);padding:9px 16px;
  transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
/* Kasse/Merkzettel/Warenkorb-Reihe: beruehrte die Startseite-Pille direkt darueber (kein
   Abstand zwischen den zwei uebereinander gestapelten <ul>-Zeilen). Etwas kleiner als
   Startseite plus eigener Abstand nach oben - macht die Startseite-Pille nebenbei auch klar
   als das primaere Element erkennbar, die drei darunter als sekundaere Gruppe. */
.top.navbar-default .nav-pills.bk-nav-utility{margin-top:10px;}
.top.navbar-default .nav-pills.bk-nav-utility>li>a{padding:6px 13px;font-size:12.5px;}
.top.navbar-default .nav-pills>li>a:hover,
.top.navbar-default .nav-pills>li>a:focus{
  background-color:rgba(255,255,255,.14) !important;border-color:#fff;color:#fff !important;
}
.top.navbar-default .nav-pills>li>a:focus-visible{outline:3px solid var(--bk-gold);outline-offset:2px;}
.top.navbar-default .nav-pills>li.active>a{
  background-color:var(--bk-burgundy) !important;border-color:var(--bk-burgundy);color:#fff !important;
}
/* Logo-Plakette in der Kopfzeile (2026-09-08, v15): das Logo-PNG hat einen fest
   eingebrannten weissen Hintergrund (kein transparentes PNG) - auf dem dunklen Navy-Band
   sass es dadurch bisher wie ein zufaelliges weisses Rechteck ("deplaziert", Nutzer-
   Feedback). Statt das Bild selbst zu bearbeiten: dieselbe "weisse Karte auf Navy-Band"-
   Sprache wie beim AHK-Finder aufgegriffen - abgerundete Ecken, dezenter Schatten, etwas
   Abstand zum Rand der Navigationsleiste, wirkt dadurch als bewusst gestaltetes Element
   statt als Zufall. */
#logo1{
  background:#fff;border-radius:12px;padding:8px 16px;margin:10px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.18);display:inline-block;
}
#logo1 img, #logo2 img{max-height:64px;width:auto;}

/* ---------- Breadcrumb-/Such-Zeile (2026-09-08) ----------
   Vorher: reines Bootstrap-Weiss ohne jede eigene Gestaltung - sass als grelle weisse
   Naht zwischen dem dunklen Kopfbereich und dem naechsten (haeufig navy/creme) Element
   jeder Seite. Jetzt: warmes Creme wie der Rest des Shops, Breadcrumb ohne Kasten-
   Optik, Suchfeld als abgerundete Pille im AHK-Finder-Feld-Stil. */
#layout_logo{background:var(--bk-cream);padding:18px 0;margin:0;border-bottom:1px solid var(--bk-border);}
#breadcrumb{background:none;border:none;box-shadow:none;padding:0;margin:0;font-size:13.5px;color:var(--bk-text-muted);font-family:var(--bk-sans);}
#breadcrumb .breadcrumb_info{display:none;}
#breadcrumb a.headerNavigation{color:var(--bk-navy);font-weight:700;text-decoration:none;}
#breadcrumb a.headerNavigation:hover{color:var(--bk-burgundy-dark);text-decoration:underline;}
#search{margin-bottom:0;}
#search .input-group{display:flex;}
#search #inputString{
  height:46px;border:2px solid var(--bk-border);border-right:none;border-radius:999px 0 0 999px;
  padding:0 18px;font-size:14px;font-family:var(--bk-sans);color:var(--bk-text);background:#fff;
  box-shadow:none;transition:border-color .18s ease-out;
}
#search #inputString:focus{border-color:var(--bk-gold);outline:none;box-shadow:none;}
#search .input-group-btn{display:flex;}
#search .search_button{
  height:46px;border-radius:0 999px 999px 0;background:var(--bk-burgundy);border:2px solid var(--bk-burgundy);
  color:#fff;font-weight:700;font-family:var(--bk-sans);padding:0 20px;transition:background .18s ease-out,border-color .18s ease-out;
}
#search .search_button:hover,#search .search_button:focus{background:var(--bk-burgundy-dark);border-color:var(--bk-burgundy-dark);color:#fff;}
#suggestions.well{background:#fff;border:none;border-radius:16px;box-shadow:0 10px 26px rgba(44,39,22,.14);padding:10px;margin-top:8px;}
@media (max-width:767px){
  #layout_logo{padding:14px 0;}
  #breadcrumb{margin-bottom:10px !important;}
}

#layout_footer.navbar-footer{background-color:var(--bk-navy-dark);color:#cdd4e8;font-family:var(--bk-sans);}
#layout_footer a{color:#dfe4f2;}
#layout_footer a:hover{color:#fff;}
#layout_footer .box-heading{color:#fff;border-bottom-color:rgba(255,255,255,.25);font-family:var(--bk-display);font-weight:600;}
#layout_footer .mod_copyright,.mod_copyright{color:#8b93a8;}

/* ---------- Fusszeile: Zahlungsmethoden-Piktogramme (2026-09-08) ---------- */
.bk-payment-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:2px;}
.bk-payment-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:60px;text-align:center;text-decoration:none;}
.bk-payment-badge{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:transform .18s ease-out;}
.bk-payment-item:nth-child(1) .bk-payment-badge{background:var(--bk-gold-dark);}
.bk-payment-item:nth-child(2) .bk-payment-badge{background:var(--bk-burgundy);}
.bk-payment-item:nth-child(3) .bk-payment-badge{background:var(--bk-gold-dark);}
.bk-payment-badge svg{width:23px;height:23px;}
.bk-payment-item span{font-size:11px;font-weight:700;color:#dfe4f2;line-height:1.3;}
.bk-payment-item:hover .bk-payment-badge{transform:translateY(-2px);}
.bk-payment-item:hover span{color:#fff;}

/* ---------- Buttons: runde, freundliche Pillen ---------- */
.bk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:15px;line-height:1.2;
  margin:0 10px 10px 0;border:2px solid transparent;text-decoration:none;font-family:var(--bk-display);
  transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out,transform .18s ease-out;
}
.bk-btn-primary{background:var(--bk-burgundy);color:#fff;}
.bk-btn-primary:hover,.bk-btn-primary:focus{background:var(--bk-burgundy-dark);color:#fff;text-decoration:none;transform:translateY(-1px);}
.bk-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.bk-btn-outline:hover,.bk-btn-outline:focus{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;text-decoration:none;}
.bk-btn-outline-ink{background:#fff;color:var(--bk-navy);border-color:var(--bk-border);}
.bk-btn-outline-ink:hover{background:var(--bk-navy);border-color:var(--bk-navy);color:#fff;text-decoration:none;}

.bk-echo-link{position:relative;text-decoration:none;color:var(--bk-navy);transition:color .18s ease-out;}
.bk-echo-link:hover{color:var(--bk-burgundy-dark);text-decoration:underline;}

/* ---------- Sektionen ---------- */
.bk-section{width:100%;padding:60px 0;}
.bk-section--tight{padding:34px 0;}
.bk-section-cream-deep{background:var(--bk-cream-deep);}
.bk-section-navy{background:linear-gradient(150deg,var(--bk-navy) 0%,var(--bk-navy-dark) 100%);color:#fff;}
.bk-section-navy .bk-h2{color:#fff;}
.bk-section-gold{background:linear-gradient(120deg,var(--bk-gold) 0%,var(--bk-gold-dark) 100%);color:#3a2504;}
.bk-section-gold .bk-h2{color:#3a2504;}
.bk-section-burgundy{background:linear-gradient(120deg,var(--bk-burgundy) 0%,var(--bk-burgundy-dark) 100%);color:#fff;}
.bk-section-burgundy .bk-h2{color:#fff;}

.bk-h2{font-family:var(--bk-display);font-size:28px;font-weight:700;color:var(--bk-navy);margin:0 0 16px 0;line-height:1.2;}
.bk-lede{font-size:15.5px;color:var(--bk-text-muted);max-width:620px;margin:0 0 8px 0;line-height:1.65;}

/* Sanfte, organische Wellen-Trennung zwischen zwei Sektionen (statt harter Kante) */
.bk-wave-top{position:relative;}
.bk-wave-top::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:36px;background:inherit;
  clip-path:path('M0,36 C 240,0 480,36 720,18 C 960,0 1200,36 1440,10 L1440,0 L0,0 Z');
}

/* ---------- HERO ---------- */
.bk-hero{padding:56px 0 60px 0;}
.bk-hero .bk-inner{display:flex;align-items:center;gap:44px;}
.bk-hero-art{
  flex:0 0 420px;width:420px;max-width:46vw;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:28px;border:6px solid #fff;box-shadow:0 16px 36px -12px rgba(13,28,70,.38);
}
.bk-hero-text{flex:1 1 480px;min-width:260px;}
.bk-hero-text h1{
  font-family:var(--bk-display);color:var(--bk-navy);font-size:34px;font-weight:700;margin:0 0 16px 0;line-height:1.22;
}
.bk-hero-text p{color:var(--bk-text-muted);font-size:16px;max-width:520px;margin:0 0 24px 0;line-height:1.6;}
.bk-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.bk-hero-phone{
  display:inline-flex;align-items:center;gap:9px;color:var(--bk-navy);font-weight:800;font-family:var(--bk-display);
  font-size:15px;background:#fff;border:2px solid var(--bk-border);border-radius:999px;padding:11px 20px;
  text-decoration:none;transition:border-color .18s ease-out;
}
.bk-hero-phone:hover{border-color:var(--bk-gold);color:var(--bk-navy);text-decoration:none;}
@media (max-width:767px){
  .bk-hero .bk-inner{flex-direction:column;text-align:center;}
  .bk-hero-art{flex-basis:auto;width:100%;max-width:440px;border-width:4px;margin:0 auto;}
  .bk-hero-text h1{font-size:25px;}
  .bk-hero-text p{margin-left:auto;margin-right:auto;}
  .bk-hero-actions{justify-content:center;}
}

/* ---------- AHK-Finder: das wichtigste Werkzeug der Seite, entsprechend prominent -----------
   Dunkles Navy-Band (wie der Hero), darin eine grosse, freistehende weisse Karte mit den
   4 Auswahlfeldern - bewusst kein schlanker Balken mehr (Impeccable-Critique: "visuell das
   am wenigsten gestaltete Element, obwohl der Kernmechanismus des Shops"). Erscheint
   weiterhin auf jeder Seite (nicht nur Startseite), daher volle Breite ausserhalb von
   .bk-home selbst umgesetzt. */
.bk-finder-wrap{
  position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
  background:linear-gradient(120deg,var(--bk-navy) 0%,var(--bk-navy-dark) 100%);
  padding:26px 0;
}
.bk-finder-inner{max-width:1000px;margin:0 auto;padding:0 32px;}
.bk-finder-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.bk-finder-icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--bk-burgundy);
  display:flex;align-items:center;justify-content:center;
}
.bk-finder-icon svg{width:22px;height:22px;}
.bk-finder-title{font-family:var(--bk-display);font-size:19px;font-weight:700;color:#fff;margin:0;}
.bk-finder-sub{font-size:13.5px;color:#c7cede;margin:2px 0 0 0;}
.bk-finder-card{
  background:#fff;border-radius:20px;padding:22px 24px;box-shadow:0 10px 28px rgba(13,28,70,.28);
}
.bk-finder-steps{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;}
.bk-finder-field{flex:1 1 190px;min-width:150px;display:flex;flex-direction:column;gap:6px;}
.bk-finder-field label{font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--bk-text-muted);}
.bk-finder-field select{
  height:46px;border:2px solid var(--bk-border);border-radius:12px;
  padding:0 14px;font-size:14px;font-family:var(--bk-sans);color:var(--bk-text);background:var(--bk-cream);
  transition:border-color .18s ease-out;
}
.bk-finder-field select:not(:disabled):hover, .bk-finder-field select:focus{border-color:var(--bk-gold);}
.bk-finder-field select:disabled{color:#b7ac91;background:#f5ede0;cursor:not-allowed;}
.bk-finder-status{width:100%;font-size:13px;color:var(--bk-text-muted);margin-top:12px;min-height:1.2em;}
.bk-finder-status--error{color:var(--bk-burgundy-dark);font-weight:700;}

/* ---------- AHK-Finder-Bewegung ----------
   Der Finder ist laut PRODUCT.md "the core mechanism of the shop, not a
   decorative widget" - entsprechend bekommt genau diese Kaskade die einzige
   wirklich autorisierte Bewegung der Seite (Impeccable animate-Pass,
   2026-09-09). Eine Materialsprache, zwei Rollen: ein neu befuelltes Feld
   "kommt an" (Opazitaet + kleine Verschiebung, kein Bounce), ein gerade
   ladendes Feld "wartet sichtbar" (reiner Opazitaets-Puls, klar
   unterschieden von "kommt an"). Klassen werden von media/content/
   ahk_finder.php beim jeweiligen fetch()-Zustandswechsel gesetzt. */
.bk-finder-field.bk-field-arrive select{animation:bk-field-arrive .42s cubic-bezier(.16,1,.3,1);}
.bk-finder-field.bk-field-loading select{animation:bk-field-pulse 1.1s ease-in-out infinite;}
.bk-finder-status.bk-status-arrive{animation:bk-status-arrive .3s cubic-bezier(.16,1,.3,1);}
@keyframes bk-field-arrive{from{opacity:.35;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
@keyframes bk-field-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@keyframes bk-status-arrive{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .bk-finder-field.bk-field-arrive select{animation:bk-field-arrive-fade .3s ease-out;}
  .bk-finder-status.bk-status-arrive{animation:bk-status-arrive-fade .25s ease-out;}
  .bk-finder-field.bk-field-loading select{animation:bk-field-pulse-gentle 1.4s ease-in-out infinite;}
}
@keyframes bk-field-arrive-fade{from{opacity:.5;}to{opacity:1;}}
@keyframes bk-status-arrive-fade{from{opacity:.4;}to{opacity:1;}}
@keyframes bk-field-pulse-gentle{0%,100%{opacity:1;}50%{opacity:.8;}}
@media (max-width:767px){
  .bk-finder-wrap{padding:20px 0;}
  .bk-finder-inner{padding:0 18px;}
  .bk-finder-card{padding:18px 16px;}
  .bk-finder-steps{gap:12px;}
  .bk-finder-field{flex:1 1 100%;}
}

/* ---------- USP-Leiste ---------- */
.bk-usp-row{display:flex;flex-wrap:wrap;}
.bk-usp-item{flex:1 1 250px;display:flex;align-items:center;gap:14px;padding:6px 22px;position:relative;}
.bk-usp-item:not(:first-child)::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--bk-border);border-radius:2px;
}
.bk-usp-badge{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bk-navy);
}
.bk-usp-item:nth-child(2) .bk-usp-badge{background:var(--bk-burgundy);}
.bk-usp-item:nth-child(3) .bk-usp-badge{background:var(--bk-gold-dark);}
.bk-usp-item:nth-child(4) .bk-usp-badge{background:var(--bk-navy);}
.bk-usp-badge svg{width:22px;height:22px;color:#fff;}
.bk-usp-item strong{display:block;font-family:var(--bk-display);font-size:15.5px;color:var(--bk-navy);margin-bottom:2px;}
.bk-usp-item span{font-size:13.5px;color:var(--bk-text-muted);line-height:1.4;}
@media (max-width:767px){
  .bk-usp-item{flex:1 1 100%;padding:14px 0 0 0;}
  .bk-usp-item:not(:first-child)::before{left:0;right:0;top:0;bottom:auto;height:2px;width:auto;}
}

/* ---------- "So einfach geht's": 3 freundliche Schritte ---------- */
.bk-steps-row{display:flex;flex-wrap:wrap;gap:28px;margin-top:6px;}
.bk-step{flex:1 1 220px;text-align:center;}
.bk-step-badge{
  width:76px;height:76px;border-radius:50%;margin:0 auto 16px auto;display:flex;align-items:center;justify-content:center;
  background:#fff;position:relative;
}
.bk-step:nth-child(1) .bk-step-badge{background:var(--bk-navy);}
.bk-step:nth-child(2) .bk-step-badge{background:var(--bk-burgundy);}
.bk-step:nth-child(3) .bk-step-badge{background:var(--bk-gold-dark);}
.bk-step-badge svg{width:34px;height:34px;color:#fff;}
.bk-step h3{font-family:var(--bk-display);font-size:17px;font-weight:700;color:var(--bk-navy);margin:0 0 8px 0;}
.bk-step p{font-size:14px;color:var(--bk-text-muted);margin:0;line-height:1.5;max-width:230px;margin-left:auto;margin-right:auto;}

/* ---------- Kategorien: Piktogramm-Embleme ---------- */
.bk-cat-row{display:flex;flex-wrap:wrap;gap:26px 20px;}
.bk-cat-item{flex:0 0 auto;width:136px;text-align:center;text-decoration:none;display:block;}
.bk-cat-badge{
  width:78px;height:78px;border-radius:26px;margin:0 auto 10px auto;display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease-out,box-shadow .18s ease-out;
}
/* Farbe nach Produktgruppe (Kupplungen/Traeger/Zubehoer), nicht nach Rasterposition -
   siehe bk_category_colorclass() in home_categories.php. */
.bk-cat-badge.bk-cat-navy{background:var(--bk-navy);}
.bk-cat-badge.bk-cat-burgundy{background:var(--bk-burgundy);}
.bk-cat-badge.bk-cat-gold{background:var(--bk-gold-dark);}
.bk-cat-badge svg{width:46px;height:46px;color:#fff;}
.bk-cat-item:hover .bk-cat-badge{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 18px rgba(44,39,22,.18);}
.bk-cat-item span{
  font-size:12.5px;font-weight:700;color:var(--bk-text);line-height:1.3;font-family:var(--bk-sans);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:3.9em;overflow-wrap:anywhere;hyphens:auto;
}
.bk-cat-item:hover span{color:var(--bk-burgundy-dark);}
/* Live-Fund 2026-09-09 (Nutzer: "kategorieuebersicht in der mobilen version"): Kategorienamen
   reichen von "Aktionsware" (1 Zeile) bis "Anhaengerkupplungen fuer Fahrzeuge aus den USA
   Canada England" (3 Zeilen) - ohne Begrenzung unterschiedlich hohe Kacheln je Karte, bei nur
   2 Spalten auf Mobil viel auffaelliger als am Desktop mit 8 Spalten. 2-Zeilen-Ellipsis wie
   .bk-part-name (v7) angewendet (oben), macht jede Kachel gleich hoch. Zusaetzlich auf Mobil
   etwas kompakter (kleinere Embleme/Schrift, engerer Reihenabstand) - bei 16 Kategorien x
   2 Spalten sonst eine sehr lange, unruhig wirkende Liste. */
@media (max-width:767px){
  .bk-cat-row{gap:18px 12px;}
  .bk-cat-item{width:47%;}
  .bk-cat-badge{width:64px;height:64px;border-radius:20px;margin-bottom:8px;}
  .bk-cat-badge svg{width:38px;height:38px;}
  .bk-cat-item span{font-size:12px;}
}

/* ---------- Feature-Band: Backbox ---------- */
.bk-feature .bk-inner{display:flex;align-items:center;gap:44px;}
.bk-feature-img{flex:0 0 auto;width:260px;max-width:38%;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.16);padding:14px;}
.bk-feature-img img{width:100%;height:auto;display:block;border-radius:16px;}
.bk-feature-text{flex:1 1 380px;min-width:260px;}
.bk-feature-text p{font-size:15px;max-width:520px;margin:0 0 22px 0;line-height:1.6;}
@media (max-width:767px){
  .bk-feature .bk-inner{flex-direction:column;text-align:center;}
  .bk-feature-img{width:190px;max-width:60%;}
  .bk-feature-text p{margin-left:auto;margin-right:auto;}
}

/* ---------- Produkte ---------- */
.bk-part-row{display:flex;flex-wrap:wrap;gap:22px;}
.bk-part{flex:1 1 150px;max-width:170px;text-decoration:none;display:block;}
.bk-part-frame{
  aspect-ratio:1/1;background:#fff;border:2px solid var(--bk-border);border-radius:22px;
  display:flex;align-items:center;justify-content:center;margin:0 0 10px 0;transition:border-color .18s ease-out,transform .18s ease-out;
}
.bk-part:hover .bk-part-frame{border-color:var(--bk-gold);transform:translateY(-2px);}
.bk-part img{max-width:76%;max-height:76%;object-fit:contain;}
.bk-part-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:13px;font-weight:700;color:var(--bk-navy);text-align:center;line-height:1.3;font-family:var(--bk-sans);
}
.bk-part:hover .bk-part-name{color:var(--bk-burgundy-dark);}

/* ---------- Marken-Leiste ---------- */
.bk-brand-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;}
.bk-brand-row span{
  font-family:var(--bk-sans);font-size:13.5px;font-weight:800;letter-spacing:.02em;color:var(--bk-text-muted);
  background:#fff;border:1px solid var(--bk-border);border-radius:999px;padding:8px 18px;
}

/* ---------- Anmerkung / SEO-Text ---------- */
.bk-note{background:#fff;border-radius:24px;padding:30px 32px;margin:0 0 8px 0;box-shadow:0 2px 14px rgba(44,39,22,.06);}
.bk-note .bk-inner{max-width:700px;padding:0;}
.bk-note p{font-size:14.5px;line-height:1.7;color:var(--bk-text);margin:0 0 16px 0;}
.bk-note p:last-child{margin-bottom:0;}

/* ---------- Ratgeber-Kacheln (Startseite, 2026-09) ---------- */
.bk-guides-row{display:flex;flex-wrap:wrap;gap:22px;}
.bk-guide-card{
  flex:1 1 210px;background:#fff;border-radius:22px;padding:26px 24px;text-decoration:none;display:block;
  box-shadow:0 2px 14px rgba(44,39,22,.06);transition:box-shadow .18s ease-out,transform .18s ease-out;
}
.bk-guide-card:hover,.bk-guide-card:focus{box-shadow:0 10px 26px rgba(44,39,22,.14);transform:translateY(-3px);text-decoration:none;}
.bk-guide-badge{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin:0 0 16px 0;}
.bk-guide-card:nth-child(3n+1) .bk-guide-badge{background:var(--bk-navy);}
.bk-guide-card:nth-child(3n+2) .bk-guide-badge{background:var(--bk-burgundy);}
.bk-guide-card:nth-child(3n+3) .bk-guide-badge{background:var(--bk-gold-dark);}
.bk-guide-badge svg{width:25px;height:25px;color:#fff;}
.bk-guide-card h3{font-family:var(--bk-display);font-size:15.5px;font-weight:700;color:var(--bk-navy);margin:0 0 8px 0;line-height:1.32;}
.bk-guide-card p{font-size:13px;color:var(--bk-text-muted);margin:0 0 14px 0;line-height:1.55;}
.bk-guide-more{font-size:12.5px;font-weight:800;color:var(--bk-burgundy);letter-spacing:.01em;}
.bk-guide-card:hover .bk-guide-more{color:var(--bk-burgundy-dark);}

/* ---------- Kontakt-CTA mit persoenlicher Signatur ---------- */
.bk-cta-band{text-align:center;}
.bk-cta-band p{font-size:15.5px;margin:0 0 22px 0;color:#f2dfe2;}
.bk-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px;}
.bk-signature{font-family:var(--bk-display);font-size:15px;color:#f6cdd3;font-weight:600;}

@media (max-width:767px){
  .bk-section{padding:40px 0;}
  .bk-h2{font-size:22px;}
  .bk-steps-row{gap:30px 20px;}
}

/* =========================================================================================
   SEITENWEITE KONSISTENZ - Kategorie-/Inhaltsseiten (Impeccable-Critique P1: "jede
   Klick-Ziel-Seite ist komplett unrestyled"). Bewusst NUR Typografie + die gemeinsamen
   Bootstrap-Bausteine (Sidebar-Box, .well-Ueberschriften, Unterkategorie-Kacheln) restylt,
   nicht die komplette Seitenstruktur neu gebaut - das haelt das Risiko fuer Checkout/Konto/
   Warenkorb etc. klein, behebt aber den schaerfsten Bruch (Kategorie- und Inhaltsseiten,
   der haeufigste Klick-Ziel-Typ von der Startseite aus). Gilt seitenweit, nicht nur
   innerhalb von .bk-home. ---------------------------------------------------------------------------------------- */
body{font-family:var(--bk-sans);color:var(--bk-text);}
h1,h2,h3,h4,h5,h6,.panel-title,.box-heading{font-family:var(--bk-display);}

/* Kategorie-Sidebar-Box (".well") - Regeln entfernt (v10, 2026-09-08): die linke
   Sidebar (#col_left) wird nicht mehr gerendert, siehe index.html. Die mobile
   Kategorie-Navigation (<nav id="navbar">, kleine Bildschirme) ist davon nicht
   betroffen, nutzt eine andere ID. */

/* Kategorie-/Abschnitts-Ueberschriften (".well") */
.well{
  background:var(--bk-cream-deep);border:none;border-radius:14px;box-shadow:none;
  color:var(--bk-navy);font-weight:700;
}

/* Unterkategorie-Kacheln */
.subcats .img-thumbnail{
  border:2px solid var(--bk-border);border-radius:18px;padding:12px;transition:border-color .18s ease-out,transform .18s ease-out;
}
.subcats .img-thumbnail:hover{border-color:var(--bk-gold);transform:translateY(-2px);}
.subcat_title{color:var(--bk-navy);font-weight:700;}

/* Links allgemein etwas waermer als Bootstrap-Standardblau */
a{color:var(--bk-navy);}
a:hover, a:focus{color:var(--bk-burgundy-dark);}

/* Preis-/Steuerhinweis auf der Produktdetailseite - war Bootstrap-Flatly-Grau
   (#b4bcc2 auf Weiss, 1.9:1, faellt WCAG AA durch) und 11px, kaum lesbar fuer
   eine gesetzlich relevante Preisangabe (Impeccable-Audit 2026-09-09). */
.pd_tax{color:var(--bk-text-muted);font-size:13px;}

/* ---------- Warenkorb-/Merkzettel-Buttons (Produktdetailseite) ----------
   Die Klassen btn-cart/btn-wish/btn-request/btn-shop werden bereits von
   source/inc/button.inc.php auf jeden Button dieser Art gesetzt, hatten aber
   nie eigenes CSS - dadurch fiel z.B. "In den Warenkorb" auf das unveraenderte
   Bootstrap-Flatly-Grau zurueck (2.6:1 Kontrast, WCAG AA faellt durch) und
   "Auf den Merkzettel" auf Bootstrap-Blau (3.2:1) - beides unmarkiert neben
   dem sonst durchgaengig navy/burgundy/gold gestalteten Rest der Seite
   (Impeccable-Audit 2026-09-09, groesster Einzelfund). Gleiche Selektor-
   Spezifitaet wie die Bootstrap-Klassen (btn-default/btn-info), stylesheet.css
   laedt laut general.css.php als letzte Datei - kein !important noetig,
   Ladereihenfolge reicht (wie ueberall sonst in dieser Datei). */
.btn-cart{
  background:var(--bk-burgundy);border-color:var(--bk-burgundy);color:#fff;
  font-weight:700;border-radius:999px;transition:background .18s ease-out,border-color .18s ease-out,transform .18s ease-out;
}
.btn-cart:hover,.btn-cart:focus{background:var(--bk-burgundy-dark);border-color:var(--bk-burgundy-dark);color:#fff;transform:translateY(-1px);}
.btn-cart:focus-visible{outline:3px solid var(--bk-gold);outline-offset:2px;}

.btn-wish,.btn-request,.btn-shop,.btn-details{
  background:#fff;border:2px solid var(--bk-border);color:var(--bk-navy);
  font-weight:700;border-radius:999px;transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
.btn-wish:hover,.btn-wish:focus,.btn-request:hover,.btn-request:focus,.btn-shop:hover,.btn-shop:focus,.btn-details:hover,.btn-details:focus{
  background:var(--bk-cream-deep);border-color:var(--bk-gold);color:var(--bk-navy);
}
.btn-wish:focus-visible,.btn-request:focus-visible,.btn-shop:focus-visible,.btn-details:focus-visible{outline:3px solid var(--bk-gold);outline-offset:2px;}

/* button_buy_now.png / button_product_more.gif (source/inc/button.inc.php) - dieselbe
   Luecke wie v27, nur auf der Listing-/Suchergebnis-Seite statt der Produktdetailseite:
   das "In den Warenkorb"/"Details"-Buttonpaar in .lr_price_box benutzt andere Bild-Keys
   als die Produktdetailseite und hatte deshalb bisher keine btn-cart/-details-Klasse
   (2026-09-09, gefunden beim Beheben des .lb_image-Ueberlapp-Bugs auf derselben Seite). */

/* ---------- Mobile Kategorienliste (boxes/box_categories.html, .box_category) ----------
   Live-Fund 2026-09-09: reiner Klartext auf einem komplett unstyled Bootstrap-Panel, auf
   der Startseite jetzt ganz entfernt (index.html, redundant mit AHK-Finder + Kategorie-
   Piktogrammen weiter unten), bleibt aber auf Kategorie-/Inhaltsseiten die einzige mobile
   Kategorie-Navigation neben dem (fahrzeugbasierten) AHK-Finder - deshalb hier ordentlich
   gestylt statt unstyled zu lassen.
   v36-Nachbesserung: erst nur ein Gold-Punkt statt Icons ("in einer schmalen einspaltigen
   Liste zu eng") - Nutzer verglich das aber direkt mit den Piktogrammen der Startseite und
   wollte dieselben Icons, nicht nur eine hübschere Liste. xtc_show_category.inc.php liefert
   jetzt (ueber die geteilte bk_category_icons.php) pro Zeile dasselbe farbige Icon-Badge wie
   die Startseite, nur kleiner (32px statt 78px) - passt auch einspaltig gut. */
.box_category{
  background:#fff;border:none;border-radius:20px;overflow:hidden;
  box-shadow:0 2px 14px rgba(44,39,22,.08);margin-bottom:20px;
}
.box_category_header{background:var(--bk-cream-deep);border:none;padding:14px 18px;}
.box_category_header .panel-title{
  font-family:var(--bk-display);font-size:15.5px;font-weight:700;color:var(--bk-navy);
}
#categorymenu.list-group{margin:0;padding:6px 0;}
#categorymenu li{list-style:none;border:none;background:none;padding:0;}
#categorymenu li a{
  display:flex;align-items:center;gap:12px;padding:9px 18px;font-size:14px;font-weight:600;
  color:var(--bk-text);text-decoration:none;font-family:var(--bk-sans);
  border-bottom:1px solid var(--bk-border);transition:background-color .15s ease-out,color .15s ease-out;
}
#categorymenu li:last-child a{border-bottom:none;}
#categorymenu li a:hover,#categorymenu li a:focus{background:var(--bk-cream);color:var(--bk-burgundy-dark);text-decoration:none;}
.cm-icon{
  flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
}
.cm-icon svg{width:22px;height:22px;color:#fff;}
.cm-icon.bk-cat-navy{background:var(--bk-navy);}
.cm-icon.bk-cat-burgundy{background:var(--bk-burgundy);}
.cm-icon.bk-cat-gold{background:var(--bk-gold-dark);}
.cm-name{flex:1 1 auto;}


/* ==========================================================================
   MARKEN-LANDINGPAGES (2026-09-19) - Kategorien Ebene 2 mit Modellliste.
   Hero -> Modellwahl (Pillen + Filter) -> Schritte -> FAQ-Akkordeon.
   Gleiche Tokens/Radien wie Startseite; kein Karten-in-Karten.
   ========================================================================== */
.bk-brand{margin:24px 0 32px;}
.bk-brand-hero{
  background:linear-gradient(135deg,var(--bk-navy) 0%,var(--bk-navy-dark) 100%);
  color:#fff;border-radius:28px;padding:34px 36px 30px;margin:0 0 22px;
}
.bk-brand-h1{margin:0 0 14px;font-family:var(--bk-display);color:#fff;line-height:1.05;}
.bk-brand-name{display:block;font-size:clamp(40px,7vw,68px);font-weight:800;letter-spacing:-.01em;}
.bk-brand-sub{display:block;font-size:clamp(16px,2.2vw,21px);font-weight:600;color:var(--bk-gold);margin-top:6px;}
.bk-brand-lead p{font-size:17px;line-height:1.6;max-width:70ch;margin:0 0 6px;color:#eef1fa;}
.bk-brand-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.bk-chip{display:inline-block;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;}
a.bk-chip-phone{background:var(--bk-gold);color:var(--bk-navy-dark);}
a.bk-chip-phone:hover,a.bk-chip-phone:focus{background:#f2ad4e;color:var(--bk-navy-dark);}

.bk-pick{background:#fff;border-radius:28px;padding:28px 30px 30px;margin:0 0 30px;box-shadow:0 8px 24px rgba(44,39,22,.08);}
.bk-pick-title{margin:0 0 14px;font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--bk-navy);}
.bk-pick-search{display:block;margin:0 0 18px;}
.bk-pick-search input{
  width:100%;max-width:420px;height:46px;border:2px solid var(--bk-border);border-radius:999px;
  padding:0 20px;font:inherit;font-size:16px;background:var(--bk-cream);color:var(--bk-text);
}
.bk-pick-search input:focus{outline:3px solid var(--bk-gold);outline-offset:1px;border-color:var(--bk-navy);}
.bk-pick-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.bk-pick-grid li[hidden]{display:none;}
.bk-pick-grid a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 18px;
  border:2px solid var(--bk-border);border-radius:999px;background:var(--bk-cream);
  font-weight:700;color:var(--bk-navy);text-decoration:none;transition:border-color .18s ease-out,background-color .18s ease-out;
}
.bk-pick-grid a:after{content:"\203A";font-size:22px;line-height:1;color:var(--bk-burgundy);}
.bk-pick-grid a:hover,.bk-pick-grid a:focus{border-color:var(--bk-burgundy);background:#fff;color:var(--bk-burgundy-dark);}
.bk-pick-none{margin:16px 0 0;font-weight:600;}

.bk-brand-faq h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--bk-navy);margin:34px 0 14px;}
.bk-steps{list-style:none;counter-reset:bkstep;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.bk-steps li{counter-increment:bkstep;background:#fff;border-radius:22px;padding:18px 20px 18px 66px;position:relative;line-height:1.5;box-shadow:0 4px 14px rgba(44,39,22,.07);}
.bk-steps li:before{
  content:counter(bkstep);position:absolute;left:16px;top:16px;width:38px;height:38px;border-radius:14px;
  background:var(--bk-navy);color:#fff;font:800 20px/38px var(--bk-display);text-align:center;
}
.bk-steps li:nth-child(2):before{background:var(--bk-burgundy);}
.bk-steps li:nth-child(3):before{background:var(--bk-gold-dark);}
.bk-faq details{background:#fff;border-radius:18px;margin:0 0 10px;box-shadow:0 3px 10px rgba(44,39,22,.06);}
.bk-faq summary{
  cursor:pointer;list-style:none;padding:16px 56px 16px 20px;font:700 17px/1.4 var(--bk-display);color:var(--bk-navy);position:relative;min-height:52px;
}
.bk-faq summary::-webkit-details-marker{display:none;}
.bk-faq summary:after{
  content:"+";position:absolute;right:16px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;
  background:var(--bk-cream-deep);color:var(--bk-burgundy);font:800 22px/32px var(--bk-display);text-align:center;
}
.bk-faq details[open] summary:after{content:"\2212";}
.bk-faq summary:focus-visible{outline:3px solid var(--bk-gold);outline-offset:2px;border-radius:18px;}
.bk-faq details p{margin:0;padding:0 20px 18px;line-height:1.65;max-width:75ch;}
@media (max-width:767px){
  .bk-brand-hero{padding:24px 20px 22px;border-radius:22px;}
  .bk-pick{padding:20px 16px 22px;border-radius:22px;}
  .bk-pick-grid{grid-template-columns:repeat(2,1fr);}
  .bk-steps{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.bk-pick-grid a{transition:none;}}


/* Nischen-Landingpages (Oldtimer / USA-CA-GB / LKW): Sonderanfertigung-Band */
.bk-custom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;background:var(--bk-burgundy);color:#fff;border-radius:28px;padding:26px 32px;margin:0 0 30px;}
.bk-custom h2{margin:0 0 6px;font-size:clamp(20px,2.6vw,26px);font-weight:800;color:#fff;}
.bk-custom p{margin:0;max-width:60ch;line-height:1.55;color:#fbe9ec;}
.bk-custom-btn{display:inline-block;background:var(--bk-gold);color:var(--bk-navy-dark);border-radius:999px;padding:14px 26px;font-weight:800;text-decoration:none;min-height:48px;}
.bk-custom-btn:hover,.bk-custom-btn:focus{background:#f2ad4e;color:var(--bk-navy-dark);}
@media (max-width:767px){.bk-custom{padding:22px 20px;border-radius:22px;}.bk-custom-btn{width:100%;text-align:center;}}


/* Auswahl-Hub (Ebene-1-Kategorie ohne Bilder): kleinere Hero-Ueberschrift, da Kategorienamen lang sind */
.bk-hub-h1 .bk-brand-name{font-size:clamp(26px,4.2vw,42px);line-height:1.15;margin-bottom:0;}
.bk-hub-h1{margin-bottom:6px;}


/* Lange Bezeichnungen (z.B. Schutzhuellen): weniger Spalten, Rundung statt Vollpille, damit mehrzeilige Eintraege nicht zu Blasen werden */
.bk-pick-long{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.bk-pick-long a{border-radius:20px;line-height:1.35;padding:12px 18px;}
@media (max-width:767px){.bk-pick-long{grid-template-columns:1fr;}}

/* Piktogramm-Satz v46: halbtransparente Flaeche (.a) und Vollfuellung (.f) */
.bk-cat-badge svg .a,.cm-icon svg .a{fill:#fff;fill-opacity:.28;}
.bk-cat-badge svg .f,.cm-icon svg .f{fill:currentColor;stroke:none;}