/*
Bike Center Birkhold J6
creation Date: 2026-06-25
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

body, html{
	font-family: 'SignikaNegative-VariableFont_wght', sans-serif;
	width: 100%;
	height: auto;
	margin: 0px;
	font-size: 16px;
	overflow-x: hidden;
	font-weight: normal;
	font-weight: light;
}
textarea, input{
	font-family: 'SignikaNegative-VariableFont_wght', sans-serif;
}
*{
	margin: 0px;
	padding: 0px;
}
.bold, b, strong, .Rubik-SemiBold, h3, h4, h5{
	font-family: 'Rubik-SemiBold', sans-serif;
}
.regular, .Rubik-Regular{
	font-family: 'Rubik-Regular', sans-serif;
}
h1, h2{
	font-family: 'Rubik-Bold', sans-serif;
}
img{
	border: none;
}
a{
	color: inherit;
	text-decoration: none;
}
.contstyles a:hover{
	text-decoration: underline;
}
a.anchorlink{
	line-height: 0px;
	height: 0px;
	font-size: 0px;
}
table{
	width: 100%;
	table-layout: fixed;
}
td{
	vertical-align: top;
	position: relative;
}
h1,
h2.title{
	font-size: 40px;
	line-height: 45px;
	letter-spacing: 1px;
}
h2{
	font-size: 34px;
	line-height: 40px;
}
h2.marged_bot{
	margin-bottom: 30px;
}
h3{
	font-size: 28px;
	line-height: 32px;
}
h4{
	font-size: 26px;
	line-height: 32px;
}
.alt_headlines h4{
	text-transform: uppercase;
	font-weight: bold;
}
h5{
	font-size: 20px;
	line-height: 28px;
}
h6{
	font-size: 20px;
}
p,
.contstyles li{
	margin-top: 15px;
	margin-bottom: 15px;
	line-height: 22px;
	position: relative;
}
.contstyles p{
	margin-top: 15px;
	margin-bottom: 15px;
}
.contstyles ul,
.contstyles ol{
	margin-left: 25px;
}
p.nomarg_top{
	margin-top: 0px;
}
p.nomarg_bot{
	margin-bottom: 0px;
}
p.nomarg{
	margin-top: 0px;
	margin-bottom: 0px;
}
.hidden{
	visibility: hidden;
}
.visible{
	visibility: visible;
}
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.uppercase,
.uppercase_headlines h1,
.uppercase_headlines h2,
.uppercase_headlines h3,
.uppercase_headlines h4,
.uppercase_headlines h5,
.uppercase_headlines h6{
	text-transform: uppercase;
}
.lowercase{
	text-transform: lowercase;
}
.nocase{
	text-transform: none;
}
.underline{
	text-decoration: underline;
}
.underline_links a,
.underline_onHover a:hover{
	text-decoration: underline;
}
.nounderline,
.nounderline *:hover{
	text-decoration: none !important;
}
.inline{
	display: inline;
}
.relative{
	position: relative;
}
.font_l,
.font_l p,
.font_l .contstyles li{
	font-size: 18px;
	line-height: 26px;
}
.fields-container{
	display: none;
}
span.font_s,
p.font_s,
.font_s li{
	font-size: 14px;
}
p.font_s,
.font_s li{
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.nooverflow{
	overflow: hidden;
}
.overflow{
	overflow: visible;
}
.functionpad{
	padding-top: 1px;
	padding-bottom: 1px;
}



/* GLOBALS */
.main-container{
	margin-left: auto;
	margin-right: auto;
	width: 1250px;
	max-width: 95%;
	position: relative;
}
.main-container.wide{
	width: 1380px;
	max-width: 98%;
}
.main-container.narrow{
	width: 1000px;
	max-width: 93%;
}
.main-container.narrow2{
	width: 800px;
	max-width: 90%;
}
.main-container.fullheight{
	display: block;
	height: 100%;
}
.extrawidepad,
.main-container.extrawidepad{
	padding-top: 180px;
	padding-bottom: 180px;
}
.widepad,
.cont-block .main-container.widepad{
	padding-top: 100px;
	padding-bottom: 100px;
}
.widepad_top,
.cont-block .main-container.widepad_top{
	padding-top: 100px;
}
.widepad_bot,
.cont-block .main-container.widepad_bot{
	padding-bottom: 100px;
}
.regpad,
.cont-block .main-container.regpad{
	padding-top: 70px;
	padding-bottom: 70px;
}
.regpad_top,
.cont-block .main-container.regpad_top{
	padding-top: 70px;
}
.regpad_bot,
.cont-block .main-container.regpad_bot{
	padding-bottom: 70px;
}
.lowpad{
	padding-top: 50px;
	padding-bottom: 50px;
}
.lowpad_bot{
	padding-bottom: 50px;
}
.lowpad_top{
	padding-top: 50px;
}
.cont-block{
	position: relative;
	display: block;
	width: 100%;
}

.page-header{
	display: none;
}

img.cont_img{
	max-width: 100% !important;
	height: auto !important;
}
img.cont_img_limit{
	max-width: 100% !important;
	width: 870px !important;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
img.absimg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
img.fullsize{
	width: 100%;
	display: block;
}
img.maxSize{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
img.sizeFittings{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

/* INDEXES */
.ddm_modal{
	z-index: 100;
}
#menu_activator{
	z-index: 14;
}
#topmenu-wrapper{
	z-index: 13;
}
#header{
	z-index: 12;
}
#logo_wrapper,
#shimano_wrap{
	z-index: 10;
}
.hinweis_floater{
	z-index: 7;
}
.zindex6,
.cont-block.zindex6{
	z-index: 6;
}
.zindex5,
.cont-block.zindex5{
	z-index: 5;
}
.zindex4,
.cont-block.zindex4{
	z-index: 4;
}
.zindex3,
.cont-block.zindex3{
	z-index: 3;
}
#content-wrapper,
.zindex2,
.cont-block.zindex2{
	z-index: 2;
}
.cont-block,
.zindex1,
.cont-block.zindex1{
	z-index: 1;
}
.zeroindex{
	z-index: 0;
}



/* transitions */
img.fullsize{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
a{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;	
}
.animated_children, .animated_children *{
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;	
}
.nonanimated_children, .nonanimated_children *{
	-webkit-transition: all 0ms linear;
	-moz-transition: all 0ms linear;
	-ms-transition: all 0ms linear;
	-o-transition: all 0ms linear;
	transition: all 0ms linear;	
}


/* CONTENT */
#content-wrapper{
	overflow: visible;
}


/* CONTENT SPECIFIC */
.block{
	display: block;
	position: relative;
}
.contentspacer{
	display: block;
	position: relative;
	width: 100%;
	height: 90px;
}
.overlay_mask{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.linespacer{
	display: block;
	position: relative;
	width: 100%;
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.linespacer.nomarg{
	margin: 0px;
}
.linespacer.narrow{
	width: 700px;
	max-width: 100%;
}

.section_bg{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 100%;
	height: auto;
}

#top_spacer{
	display: block;
	position: relative;
	height: 120px;
}

.flexwrap{
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
.flexwrap.leftalign{
	justify-content: left;
	gap: 2%;
}

.flexbox{
	position: relative;
}
.flexbox._s10{
	width: 10%;
}
.flexbox._s15{
	width: 15%;
}
.flexbox._s20{
	width: 20%;
}
.flexbox._s25{
	width: 25%;
}
.flexbox._s30{
	width: 30%;
}
.flexbox._s35{
	width: 35%;
}
.flexbox._s40{
	width: 40%;
}
.flexbox._s45{
	width: 45%;
}
.flexbox._s47{
	width: 47%;
}
.flexbox._s49{
	width: 49%;
}
.flexbox._half{
	width: 48%;
}
.flexbox._s50{
	width: 50%;
}
.flexbox._s60{
	width: 60%;
}
.flexbox._s65{
	width: 65%;
}
.flexbox._s70{
	width: 70%;
}
.flexbox._s75{
	width: 70%;
}
.flexbox._s80{
	width: 80%;
}
.flexbox._s90{
	width: 90%;
}
.flexbox._full{
	width: 100%;
}
.flexbox_half{
	width: 48%;
}
.flexbox_third{
	width: 31%;
}


.contentbutton{
	position: relative;
	display: inline-block;
	margin-left: 0px;
	z-index: 1;
	border: none;
	border-radius: 0px;
	padding: 0px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 16px;
	width: 100px;
	height: 45px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	overflow: hidden;
}
.contentbutton.abs{
	position: absolute;
}
.contentbutton a{
	position: absolute !important;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	font-weight: bold;
}
.contentbutton a::after{
	display: none !important;
}
.contentbutton > a > span{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.contentbutton:hover a{
	text-decoration: none;
}
.contentbutton:hover{
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
}
.contentbutton.hoverblur::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.contentbutton.hoverblur:hover::before {
  opacity: 1;
}
.contentbutton.bordered{
	border: 1px solid;
}
.contentbutton span.contentbutton_arrow{
	display: inline-block;
	font-weight: bold;
	padding-left: 2px;
	font-family: 'Raleway-ExtraBold', sans-serif;
}
.contentbutton:hover span.contentbutton_arrow{
	padding-left: 6px;
}
.contentbutton .contentbutton_arrow_icon{
	display: inline-block;
	vertical-align: middle;
	height: 12px;
	padding-left: 3px;
}
.contentbutton:hover .contentbutton_arrow_icon{
	padding-left: 6px;
}



/* SPECIFICS */
.linehover_links a,
.linehover_links a:hover{
    position: relative;
    text-decoration: none;
}
.linehover_links a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background-color: #1a1a1a;
    transition: width 300ms ease;
}
.linehover_links a:hover::after {
    width: 100%;
}
.white .linehover_links a::after,
.white.linehover_links a::after,
.footer_wrapper.linehover_links a::after{
	 background-color: white;
}
.g .linehover_links a::after,
.g.linehover_links a::after{
	 background-color: #C3C2C2;
}
.lg .linehover_links a::after,
.lg.linehover_links a::after{
	 background-color: #f7f7f7;
}



.linkoverlay{
	position: absolute !important;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 4;
}


/* claro accessibility overrides */
.cm-link.cn-learn-more{
	color: black !important;
}
.cm-btn.cm-btn-danger.cn-decline{
	background-color: #767676 !important;
}
.cm-btn.cm-btn-success{
	background-color: #0a835f !important;
}
.cm-btn.cm-btn-success-var{
	background-color: #00875f !important;
}




/* DDM MODAL */
.ddm_modal{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	opacity: 0;
	overflow: hidden;
	backdrop-filter: blur(8px); 
	-webkit-backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, 0.35);
}
.ddm_modal.active{
	height: 100%;
	opacity: 1;
}
.ddm_modal_contwrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	max-width: 95%;
	height: 800px;
	max-height: 90%;
	overflow: hidden;
	border-bottom-right-radius: 200px;
	border-bottom-left-radius: 200px;
	padding-bottom: 400px;
	box-sizing: border-box;
}
.ddm_modal_close{
	position: absolute;
	top: 15px;
	right: 25px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	cursor: pointer;
}
.ddm_modal_close:hover{
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.45)) brightness(1.1);
}
.ddm_modal_close span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	pointer-events: none;
	font-size: 30px;
}
.ddm_modal_cont{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 40px;
	overflow-x: hidden;
	overflow-y: scroll;
}


/* PAGE TEMPLATE STYLES */




/* MARKEN BLOCK */
.marken_block .main-container{
	position: relative;
	z-index: 2;
}
.marken_grid{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-top: 35px;
	margin-bottom: 35px;
	gap: 3px;
}
.marken_item{
	box-sizing: border-box;
	width: 24%;
	aspect-ratio: 16 / 7;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* inner bounding box = the secret to equal-looking logos */
.marken_logo{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.marken_logo img{
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* CTA cell: no white_bg -> background photo shows through */
.marken_cta{
	background: transparent;
	border: none;
	box-shadow: none;
}
.marken_button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 14px 36px;
	border-radius: 50px;
	background-color: #ffed00;
	color: #0d4094;
	font-family: 'Rubik-SemiBold', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
}
.marken_button:hover{
	color: #1a1a1a;
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.30);
	transform: translateY(-1px);
	text-decoration: none;
}
.marken_button.yel:hover{
	color: #ffed00;
}
/* neutralise the inherited linehover_links underline on the button */
.marken_block .marken_button::after{
	content: none !important;
	display: none !important;
}
/* MARKEN — clickable boxes, hover colourisation & elegant hover (additive) */
a.marken_item{
	position: relative;
	transition: transform 350ms ease, box-shadow 350ms ease;
}
a.marken_item:hover{
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0,0,0,0.30);
	text-decoration: none;
	z-index: 3;
}

/* logos black by default, full colour on hover */
.marken_logo img{
	transition: filter 450ms ease, transform 450ms ease;
}
a.marken_item:hover .marken_logo img{
	filter: none;
	transform: scale(1.05);
}

/* neutralise the inherited linehover_links / contstyles underline on logo links */
.marken_block a.marken_item::after{
	content: none !important;
	display: none !important;
}







/* INTRO IMAGE BLOCK */
.intro_block{
	display: block;
	position: relative;
	height: 640px;
	z-index: 0;
	overflow: hidden;
}
.intro_block.slim{
	height: 400px;
}
.intro_textwrap{
	position: absolute;
	z-index: 2;
	color: white;
	text-align: center;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
.intro_block._normal .intro_textwrap{
	text-align: left;
	width: 1200px;
	transform: translate(-50%, -40%);
	left: 50%;
}
.intro_textwrap h1{
	font-size: 70px;
	line-height: 70px;
}
.intro_block._normal h1{
	font-size: 50px;
	line-height: 50px;
}


/* ADV BOXES */
.adv_block_wrapper{
	padding-top: 35px;
	padding-bottom: 35px;
}
.adv_block_container{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 97%;
	max-width: 1850px;
}
.adv_flexwrap{
	width: 100%;
}
.adv_flexwrap .flexbox{
	width: 49%;
}
.adv_box_img{
	display: block;
	width: 100%;
}
.adv_txt{
	position: absolute;
	z-index: 2;
	width: 80%;
	left: 10%;
	bottom: 20%;
	text-transform: uppercase;
	font-size: 18px;
}
.adv_txt a.marken_button{
	margin-top: 30px;
}
.adv_box_img_add{
	position: absolute;
	z-index: 3;
	top: 2%;
	left: 0%;
	height: 110px;
}
.adv_box_img_add:hover{
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.45)) brightness(1.1);
}





/* SCROLLING TICKER / BANNER */
.scrollticker_wrapper{
	position: relative;
	display: block;
	width: 100%;
	height: 140px;                 /* see responsive.css for smaller screens */
	overflow: hidden;              /* (nooverflow already does this, kept for safety) */
	background-image: url("/images/icons/banner _bc_birkhold.svg");
	background-repeat: repeat-x;      /* was: no-repeat  -> tiles left & right */
	background-position: center center;
	background-size: auto 100px;
	padding-top: 0px;
	padding-bottom: 60px;
}
.scrollticker{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;           /* vertical-centres the text on the blue band */
	justify-content: flex-start;
	overflow: hidden;
}
.scrollticker_track{
	display: flex;
	flex: 0 0 auto;                /* size to content, overflow to the right */
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation-name: scrollticker_move;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;  /* JS starts it once widths are measured */
	/* animation-duration is set inline by the JS */
}
.scrollticker_track.is-ready{
	animation-play-state: running;
}
.scrollticker_item{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.scrollticker_text{
	flex: 0 0 auto;
	display: block;
	padding: 0px 108px;             /* uniform gap around text AND the +++ */
	font-family: 'Rubik-Bold', sans-serif;
	font-size: 34px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
.scrollticker_sep{
	flex: 0 0 auto;
	display: block;
	height: 20px;                  /* the +++ svg size; width scales automatically */
	width: auto;
	user-select: none;
	pointer-events: none;
}
@keyframes scrollticker_move{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
/* accessibility: don't animate for users who ask for reduced motion */
@media (prefers-reduced-motion: reduce){
	.scrollticker_track{
		animation: none !important;
		transform: none !important;
	}
}





/* ============ SERVICE OVERVIEW ============ */
.service_grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: start;
}

/* --- cards --- */
.service_grid .service_card{
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none !important;
	transition: transform 350ms ease, box-shadow 350ms ease;
}
.service_grid .service_card_img{
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform 600ms ease;
}
.service_grid .service_card_cap{
	display: block;
	text-align: center;
	padding: 16px 18px 18px;
	z-index: 10;
}
.service_grid .service_card_title{
	display: block;
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 19px;
	line-height: 24px;
}
.service_grid .service_card_sub{
	display: block;
	font-size: 15px;
	line-height: 20px;
	margin-top: 2px;
}

/* elegant hover: lift + shadow + gentle image zoom */
.service_grid .service_card:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(0,0,0,0.22);
	text-decoration: none !important;
	z-index: 3;
}
.service_grid .service_card:hover .service_card_img{
	transform: scale(1.06);
}
/* neutralise inherited underline / linehover pseudo */
.service_grid .service_card::after{
	content: none !important;
	display: none !important;
}

/* --- "Weitere Leistungen" cell --- */
.service_grid .service_more{
	padding-top: 6px;
	padding-left: 50px;   /* extra indent from the grid gap */
}
.service_grid .service_more_title{
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 20px;
}
.service_grid .service_more_list{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.service_grid .service_more_list li{
	position: relative;
	padding-left: 20px;
	margin: 0px 0px 10px 0px;
	font-size: 18px;
	line-height: 24px;
}
.service_grid .service_more_list li::before{
	content: "•";
	position: absolute;
	left: 2px;
	top: 0px;              /* bullet inherits the blue text colour */
}


/* ============ REICHWEITEN-ASSISTENT ============ */
.rw_block{
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 90px;
}
.rw_block .rw_media{
	flex: 0 0 46%;
	max-width: 46%;
}
.rw_block .rw_img{
	display: block;
	width: 100%;
	height: 420px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 24px 210px 210px 24px;  /* flat-ish left, semicircle right (radius = height / 2) */
}
.rw_block .rw_text{
	flex: 1 1 auto;
}
.rw_block .rw_eyebrow{
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 6px;
}
.rw_block .rw_title{
	font-family: 'Rubik-Bold', sans-serif;
	font-size: 26px;
	line-height: 40px;
	text-transform: none;   /* beat uppercase_headlines so the heading stays mixed-case */
	margin-bottom: 22px;
}
.rw_block .rw_desc{
	font-size: 18px;
	line-height: 28px;
	margin-top: 0px;
	margin-bottom: 28px;
}
.rw_block .rw_button{
	margin-top: 0px;
}
.rw_block .marken_button::after{
	content: none !important;
	display: none !important;
}




/* HINWEIS FLOATER */
.hinweis_floater{
	position: fixed;
	right: 0px;
	top: 20%;
	box-sizing: border-box;
	width: 360px;
	padding: 40px;
	padding-left: 80px;
	font-size: 14px;
	border-left: 4px solid #ffed00;      /* only left side */
	border-radius: 9999px 0 0 9999px;    /* round top-left & bottom-left */
	text-decoration: none;
}






/* ============ ERGONOMIEBERATUNG ============ */
/* intro oval image */
/* pre-cut shape image — just render at natural proportions */
.ergo_oval{
	display: block;
	width: 100%;
	height: auto;
}
/* small blue label above the headings */
.ergo_eyebrow{
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 8px;
}

/* heading spacing in the text-heavy sections */
.ergo_intro h2,
.ergo_mid h2{
	margin-bottom: 18px;
}
.ergo_intro .flexwrap{
	align-items: center;   /* vertically centre text column against the image */
}

/* ---- IDMatch / Vorteil row + yellow background shape ---- */
.ergo_mid{
	position: relative;
	margin-top: 90px;
}
.ergo_mid .main-container{
	position: relative;
	z-index: 2;                         /* keep all text above the yellow shape */
}
.ergo_yellow{
	position: absolute;
	top: 40%;                           /* was 50% (center) -> a bit higher */
	right: 0px;
	transform: translateY(-50%);
	width: 42%;
	height: 300px;                      /* was 440px -> thinner */
	border-radius: 180px 0px 0px 180px; /* half of new height, keeps a clean semicircle */
	z-index: 0;
}

/* benefit list */
.ergo_list{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.ergo_list li{
	position: relative;
	padding-left: 20px;
	margin: 0px 0px 10px 0px;
	font-size: 18px;
	line-height: 24px;
}
.ergo_list li::before{
	content: "•";
	position: absolute;
	left: 2px;
	top: 0px;                           /* bullet inherits the blue text colour */
}
/* ---- contact CTA ---- */
.ergo_cta{
	margin-top: 100px;
}
/* pre-cut circular image */
.ergo_circle{
	display: block;
	width: 180px;
	height: auto;
	margin: 0px auto 26px auto;
}
.ergo_cta h2{
	margin-bottom: 16px;
}
.ergo_cta p{
	font-size: 18px;
	line-height: 28px;
	margin-top: 0px;
	margin-bottom: 28px;
}
/* neutralise the inherited linehover underline on the button */
.ergo_cta .marken_button::after{
	content: none !important;
	display: none !important;
}

.indoor_cycling_stoerer{
	position: absolute;
	height: 160px;
	bottom: -60px;
	right: -60px;
}

.icon_financeabike{
	position: absolute;
	height: 140px;
	bottom: 100%;
	right: -50px;
}





/* ============ ACCORDEONS ============ */
.acc_wrap{
	position: relative;
	border-top-width: 1px;
	border-top-style: solid;              /* colour comes from .yel_border */
}
.acc_wrap:last-child{
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

/* header */
.acc_activator{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 0px;
	cursor: pointer;
}
.acc_title{
	margin: 0px;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0.5px;
	font-weight: lighter;
}
.acc_wrap._act .acc_title{
	font-family: 'Rubik-Bold', sans-serif;   /* open item reads a touch stronger */
	font-weight: bold;
}
.acc_icon{
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-image: url('/images/icons/pfeil_unten_bc_birkhold.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 250ms ease;
}
.acc_wrap._act .acc_icon{
	background-image: url('/images/icons/pfeil_oben_bc_birkhold.svg');
}
/* subtle hover: nudge the chevron toward its action */
.acc_activator:hover .acc_icon{
	transform: translateY(2px);
}
.acc_wrap._act .acc_activator:hover .acc_icon{
	transform: translateY(-2px);
}

/* collapsible body */
.acc_content{
	overflow: hidden;
	max-height: 0px;
	transition: max-height 500ms ease;
}
.acc_wrap._act .acc_content{
	max-height: 2000px;                   /* generous ceiling; taller than any item */
}
.acc_content_inner{
	padding-bottom: 34px;
}
.acc_content_inner > p:first-child{
	margin-top: 0px;
}

/* lists inside accordeons */
.acc_content .acc_list{
	list-style: none;
	margin: 10px 0px 20px 0px;
	padding: 0px;
}
.acc_content .acc_list li{
	position: relative;
	padding-left: 22px;
	margin: 0px 0px 8px 0px;
	line-height: 24px;
}
.acc_content .acc_list li::before{
	content: "•";
	position: absolute;
	left: 4px;
	top: 0px;                             /* colour set in colors.css */
}

/* warning callout */
.acc_warn{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 22px;
}
.acc_warn_mark{
	flex: 0 0 auto;
	font-family: 'Rubik-Bold', sans-serif;
	line-height: 24px;
}
.acc_warn > .bold{
	line-height: 24px;
}



.inline_social_media_icon{
	position: relative;
	display: inline-block;
	height: 40px;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
}
.inline_social_media_icon:hover{
	filter: brightness(1.1);
}




.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: start;
}

.timeline-date {
  font-weight: bold;
  color: #ffed00;
  padding-right: 10px;
}

.timeline-text {
  line-height: 1.5;
}




.line{
	display: block;
	position: relative;
	width: 100%;
	height: 1px;
}

.handwritten_signage{
  font-family: Corinthia-Bold;
	font-size: 40px;
	line-height: 55px;
}



/* ==================================================================
   KURSÜBERSICHT 2026  –  course cards
   Bike Center Birkhold – add to template.css
   ================================================================== */
.kurs_grid{
	--kurs-navy:   #0d4094;
	--kurs-yellow: #ffed00;
	--kurs-grey:   #f4f5f7;
	--kurs-muted:  #a7bccc;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	align-items: start;
	margin-top: 40px;
}

/* --- card shell --- */
.kurs_grid .kurs_card{
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0px;
	background: #ffffff;
	color: inherit;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
/* kill the inherited linehover_links underline pseudo on the <a> card */
.kurs_grid .kurs_card::after{
	content: none !important;
	display: none !important;
}
/* bookable card is a link → lift on hover */
.kurs_grid a.kurs_card{
	cursor: pointer;
	transition: transform 350ms ease, box-shadow 350ms ease;
}
.kurs_grid a.kurs_card:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(0,0,0,0.22);
	z-index: 3;
}
.kurs_grid .kurs_card--full{
	cursor: default;
}

/* --- media / image --- */
.kurs_grid .kurs_card_media{
	position: relative;
	overflow: hidden;
}
.kurs_grid .kurs_card_img{
	display: block;
	width: 100%;
	aspect-ratio: 11 / 10;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform 600ms ease;
}
.kurs_grid a.kurs_card:hover .kurs_card_img{
	transform: scale(1.06);
}

/* decorative corner slashes (top-left + bottom-right) */
.kurs_grid .kurs_card_media::before,
.kurs_grid .kurs_card_media::after{
	content: "";
	position: absolute;
	width: 132px;
	height: 2px;
	background: rgba(255,255,255,0.7);
	transform: rotate(45deg);
	transform-origin: center;
	pointer-events: none;
	z-index: 4;
}
.kurs_grid .kurs_card_media::before{
	top: 42px;
	left: -42px;
}
.kurs_grid .kurs_card_media::after{
	bottom: 42px;
	right: -42px;
}

/* --- overlay --- */
.kurs_grid .kurs_card_overlay{
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

/* ausgebucht: fade + grayscale the photo, show status text */
.kurs_grid .kurs_card--full .kurs_card_img{
	filter: grayscale(100%);
}
.kurs_grid .kurs_card--full .kurs_card_overlay{
	background: rgba(246,247,249,0.62);
}
.kurs_grid .kurs_card_status{
	font-family: 'Rubik-Bold', sans-serif;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 1px 6px rgba(0,0,0,0.20);
}

/* bookable: yellow-outlined CTA pill over the photo */
.kurs_grid .kurs_card_cta{
	display: inline-block;
	padding: 11px 30px;
	border: 4px solid var(--kurs-yellow);
	border-radius: 50px;
	background: transparent;
	color: var(--kurs-yellow);
	font-family: 'Rubik-SemiBold', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease;
}
.kurs_grid a.kurs_card:hover .kurs_card_cta{
	background: var(--kurs-yellow);
	color: var(--kurs-navy);
}

/* --- footer bar --- */
.kurs_grid .kurs_card_foot{
	display: block;
	text-align: center;
	padding: 15px 16px 17px;
	background: var(--kurs-grey);
	z-index: 5;
}
.kurs_grid .kurs_card--open .kurs_card_foot{
	background: var(--kurs-yellow);
}
.kurs_grid .kurs_card_name{
	display: block;
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 19px;
	line-height: 24px;
	color: var(--kurs-muted);
}
.kurs_grid .kurs_card_time{
	display: block;
	font-size: 15px;
	line-height: 20px;
	margin-top: 2px;
	color: var(--kurs-muted);
}
.kurs_grid .kurs_card--open .kurs_card_name,
.kurs_grid .kurs_card--open .kurs_card_time{
	color: var(--kurs-navy);
}

/* --- brief highlight of the form dropdown after a card jump --- */
@keyframes ddmKursFlash{
	0%, 100% { box-shadow: 0 0 0 0 rgba(13,64,148,0); }
	30%      { box-shadow: 0 0 0 4px rgba(13,64,148,0.35); }
}
.ddm_select._flash .ddm_select_trigger{
	animation: ddmKursFlash 1200ms ease;
}







/* ============ ANGEBOTE / OFFER LIST ============ */
.angebote_grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 60px;
	align-items: start;
}

/* --- box --- */
.angebot_box{
	position: relative;
	display: block;
	transition: transform 300ms ease, box-shadow 300ms ease;
}
.angebot_box:hover{
	transform: translateY(-4px);
}

/* --- media area (light) --- */
.angebot_media{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.angebot_img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 26px 26px 100px;   /* keep bike above the caption bar */
	box-sizing: border-box;
	transition: transform 600ms ease;
}
.angebot_box:hover .angebot_img{
	transform: scale(1.04);
}

/* --- % flag (svg already contains blue flag + yellow %) --- */
.angebot_flag{
	position: absolute;
	top: 0;
	left: 24px;
	width: 48px;
	height: auto;
	z-index: 3;
	display: block;
}

/* --- caption bar (gray, overlaps bottom of media) --- */
.angebot_cap{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 14px 18px 16px;
	text-align: center;
}
.angebot_title{
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.angebot_price{
	margin-top: 4px;
	line-height: 22px;
}
.angebot_uvp{
	color: #ffffff;
	font-size: 14px;
	margin-right: 8px;
	white-space: nowrap;
}
.angebot_uvp s{
	text-decoration: line-through;
}
.angebot_preis{
	font-family: 'Rubik-Bold', sans-serif;
	font-weight: 700;
	font-size: 20px;
	white-space: nowrap;
}

/* --- spec rows (white bg, blue text) --- */
.angebot_specs{
	display: block;
	padding-top: 4px;
}
.angebot_row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 15px;
	line-height: 20px;
}
.angebot_row_label{
	flex: 0 0 auto;
}
.angebot_row_val{
	flex: 1 1 auto;
	text-align: right;
	font-family: 'Rubik-SemiBold', sans-serif;
}
a.angebot_box,
a.angebot_box:hover{
	color: inherit;
	text-decoration: none !important;
}
.angebote_grid.angebote_anim .angebot_box{
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 500ms ease, transform 500ms ease;
}
.angebote_grid.angebote_anim .angebot_box.is-in{
	opacity: 1;
	transform: none;
}




/* ============ ANGEBOT DETAILSEITE ============ */
.detail_wrap{
	align-items: flex-start;
}

/* ---- gallery (left) ---- */
.detail_gallery{ position: relative; }
.detail_main{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.detail_main_img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 20px;
	box-sizing: border-box;
}
.detail_thumbs{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}
.detail_thumb{
	position: relative;
	width: 104px;
	height: 104px;
	padding: 8px;
	background: #ffffff;
	border: 2px solid #e5e5e5;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 200ms ease, transform 200ms ease;
}
.detail_thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.detail_thumb:hover{ transform: translateY(-2px); }
.detail_thumb.is-active{ border-color: #0d4094; }

/* ---- info (right) ---- */
.detail_flag{
	display: block;
	width: 48px;
	height: auto;
	margin-bottom: 18px;
}
.detail_title{
	margin: 0 0 18px 0;
}
.detail_desc{
	margin-bottom: 28px;
}
.detail_desc p:first-child{ margin-top: 0; }

/* price + brand */
.detail_pricerow{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}
.detail_uvp{
	font-size: 15px;
	line-height: 20px;
}
.detail_preis{
	font-family: 'Rubik-Bold', sans-serif;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 0.5px;
}
.detail_brand{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 66px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #e5e5e5;
}
.detail_brand img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* ---- spec tables (shared by both) ---- */
.detail_specs{ display: block; }
.detail_row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 12px 2px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 16px;
	line-height: 22px;
}
.detail_row:first-child{
	border-top: 1px solid #e5e5e5;
}
.detail_row_label{ flex: 0 0 auto; }
.detail_row_val{
	flex: 1 1 auto;
	text-align: right;
}
.detail_row--strong .detail_row_label,
.detail_row--strong .detail_row_val{
	font-family: 'Rubik-Bold', sans-serif;
	font-weight: bold;
}

/* ---- fixed yellow contact block ---- */
.detail_contact{
	position: relative;
	margin: 36px 0;
	padding: 40px 44px 40px 40px;
	border-radius: 24px 200px 200px 24px;   /* flat-ish left, big rounded right bulge */
	overflow: hidden;
}
.detail_contact_txt{
	margin: 0 0 22px 0;
	max-width: 62%;
	font-size: 17px;
	line-height: 24px;
}
.detail_contact_tel{
	margin: 0 0 6px 0;
	font-family: 'Rubik-Bold', sans-serif;
	font-size: 24px;
	line-height: 30px;
}
.detail_contact_tel a{ text-decoration: none; }
.detail_contact_oeff{
	margin: 0;
	font-size: 15px;
}

/* ---- "Weitere Spezifikationen" accordion (self-contained) ---- */
.dspec_acc{
	margin-top: 10px;
	border-top: 1px solid #e5e5e5;
}
.dspec_head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 2px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	color: inherit;
	font: inherit;
}
.dspec_head_title{
	font-family: 'Rubik-Bold', sans-serif;
	font-size: 18px;
	line-height: 24px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.dspec_icon{
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-image: url('/images/icons/pfeil_unten_bc_birkhold.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 250ms ease;
}
.dspec_acc._open .dspec_icon{
	background-image: url('/images/icons/pfeil_oben_bc_birkhold.svg');
}
.dspec_body{
	overflow: hidden;
	max-height: 0;
	transition: max-height 450ms ease;
}
.dspec_acc._open .dspec_body{
	max-height: 3000px;
}
.dspec_body_inner{
	padding-bottom: 20px;
}




/* ============ ANGEBOTE SLIDER (Startseite) ============ */
.angebote_slider{
	position: relative;
	width: 100%;
}

/* white stadium-left shape, 85% width, flush to the right edge */
.angebote_shape{
	position: relative;
	width: 90%;
	margin-left: 10%;
	box-sizing: border-box;
	padding: 56px 0 56px 156px;              /* no right padding -> boxes reach the edge */
	border-radius: 9999px 0 0 9999px;       /* big rounded left, square right */
}

/* reveal-from-right (armed here, released by JS when in view) */
.js-reveal-right{
	opacity: 0;
	transform: translateX(80px);
	transition: opacity 700ms ease, transform 700ms ease;
}
.js-reveal-right.is-in{
	opacity: 1;
	transform: none;
}

/* heading */
.angebote_head{
	text-align: center;
	padding-right: 56px;                    /* balance the shape's left padding */
	margin-bottom: 44px;
}
.angebote_headline{
	margin: 0;
}
.angebote_subline{
	margin: 10px 0 0 0;
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 18px;
	line-height: 24px;
}

/* viewport clips the track to the shape; track is dragged via transform */
.angebote_viewport{
	overflow: hidden;
}
.angebote_track{
	display: flex;
	gap: 24px;
	will-change: transform;
	cursor: grab;
	user-select: none;
	touch-action: pan-y;                    /* vertical page scroll stays native */
}
.angebote_track.is-dragging{
	cursor: grabbing;
}
.angebote_track .angebot_box{
	flex: 0 0 300px;
	width: 300px;
}

/* caption: gray by default, blue on hover (matches the highlighted box) */
.angebote_track .angebot_box:hover .angebot_cap{
	background-color: #0d4094;
}

/* "Alle Angebote" outline button */
.angebote_more{
	text-align: center;
	padding-right: 56px;
	margin-top: 44px;
}
.angebote_more_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 14px 40px;
	border: 2px solid #ffed00;
	border-radius: 50px;
	background: transparent;
	color: #0d4094;
	font-family: 'Rubik-SemiBold', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.angebote_more_btn:hover{
	background: #ffed00;
	color: #0d4094;
	transform: translateY(-1px);
	text-decoration: none !important;
}