@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}
:root {
    --txt: #000000;
	--txt-light: #b9b8b8;
	--background: #FFFFFF;
	--bg-grey: #F7F6F6;
	--bg-highlight: #C9262F;
}
html, html body {
	font-size:14px;
    font-family:Inter, Arial, Helvetica, sans-serif;
	font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
	line-height:1.5;
	letter-spacing:-2%;
	background-color:var(--background);
	color:var(--txt);
}
body {
	/*Sticky Footer*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.hyphens,
.hyphens-xs,
.flowrow {
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.breakword {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}
small, .small {
	font-size:0.8em;
}
header {
	padding-bottom:75%;
	position:relative;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
header > img,
header > .img {
	position:absolute;
	bottom:15px;
	left:50%;
	transform:translateX(-50%);
}
header > .img img {
	width:150px;
}
header .btn {
	position:absolute;
	top:15px;
	padding:10px 17px;
	min-width:0;
}
header .webhome {
	left:1.5rem;
}
header .cart {
	right:1.5rem;
}
header .cart .tix {
	position:absolute;
	top:49%;
	right:37px;
	transform:translateY(-50%);
}
.subsection_nav {
	position:relative;
}
.subsection_nav:after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  text-align:right;
  font-family: FontAwesome;
  font-weight: 900;
  content: "\f1db";
  position:absolute;
  top:50%;
  right:24px;
  transform:translateY(-50%);
}
.subsection_nav.active:after {
  content: "\f111";
}
main {
	font-size:16px;
	min-height: 5em;
	flex: 1 0 auto;/*Sticky Footer*/
}
.Content {
	font-size:16px;
	margin-top:32px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-weight:700;
	line-height:1;
	letter-spacing:-4%;
}
h1, .h1 {
	font-size:35px;
	margin-bottom:32px;
	text-align:center;
}
h2, .h2 {
	font-size:28px;
	margin-bottom:22px;
}
h3, .h3 {
	font-size:20px;
	line-height:0.95;
}
h4, .h4 {
	font-size:17px;
	font-weight:700;
	line-height:1.08;
}
h5, .h5 {
	font-size:1em;
	font-weight:bolder;
}
h1 small {
	font-size:18px;
	font-weight:normal;
	color:var(--bg-highlight);
}
img {
	max-width:100%;
	height:auto;
}
a, .pseudolink {
	color:var(--black);
	text-decoration:underline;
	cursor:pointer;
	transition:color 200ms linear;
}
a:hover, a:focus,
.pseudolink:hover {
	color:var(--black);
	transition:color 200ms linear;
}
.pseudolink:hover,
*[onclick]:hover,
*[data-src]:hover,
*[data-toggle="modal"]:hover {
	cursor:pointer;
}
section {
	margin-top:32px;
	margin-bottom:64px;
}
.subsection {
	background-color:var(--bg-grey);
	border-radius:8px;
	padding:10px 15px;
	margin-bottom:1rem;
}
.subsection .highlight {
	background-color:var(--background);
	padding:10px;
	min-width:200px;
	text-align:center;
	border-radius:6px;
}
.subsection .card-img-top {
	position:relative;
	top:-10px;
	left:-15px;
	max-width:none;
	width:calc(100% + 30px);
	border-top-right-radius:8px;
	border-top-left-radius:8px;
}
.subsection .listicon a {
	/*padding:2px 4px;*/
	border-radius:2px;
	transition: background 200ms linear;
}
.subsection .listicon a:hover,
.subsection .listicon a:focus {
	background:var(--background);
	transition: background 200ms linear;
}
.accordion-body {
	padding-top:4px;
}
.Content .accordion-item {
	border-radius:8px !important;
	border:none;
	margin-bottom:24px;
	background-color:var(--bg-grey);
}
.Content .accordion-button {
	color:var(--txt);
	background-color:var(--bg-grey);
	font-size:17px;
	font-weight:700;
}
.Content .accordion-button:not(.collapsed) {
	box-shadow:none;
}
.Content .accordion-item .accordion-header .accordion-button {
	border-radius:8px !important;
}
[data-bs-theme="dark"] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
/*[data-bs-theme="dark"] select.form-select option {
  color: var(--background);
  background-color: transparent;
}*/

.form-label {
	font-size:14px;
	margin-bottom:0;
}
.form-check .form-check-input {
	margin-top:0.1rem;
}
form.order {
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content: space-between;
	align-items:center;
	margin-left:-6px;
	margin-right:-6px;
}
form.order > * {
	font-size:14px;
	font-weight:500;
	margin:8px 6px;
}
.order p.me-auto {
	width:100%;
	margin-bottom:0;
}
form.order > * > strong{
	font-size:16px;	
	font-weight:500;
}
.order .form-control, select#Count {
	margin-bottom:0;
}
.form-control, .form-select {
	font-size:16px;
	border:2px solid transparent;
	border-radius:6px;
	background-color:var(--background);
	margin-bottom:0.5rem;
}
.form-select {
	text-align:center;
}
.form-select option {
	color:var(--txt);
}
/*Warenkorb*/
.smallGutter > .row.align-items-center:not(:last-child) {
	margin-bottom:1.5rem;
}
.smallGutter .form-control, 
.smallGutter .form-select{
	background-color:transparent;
	border:2px solid var(--txt);
}
.smallGutter .form-select {
	padding-right:1.9rem;
}
.input-group .form-control {
	margin-bottom:0;
}
input[type="number"].form-control {
	padding-left:3px;
	padding-right:3px;	
}
button:not(.navbar-toggler):not(.accordion-button):not(.ccm--ctrl-init), 
html input[type="button"], input[type="submit"], 
.btn, .btn-group-sm > .btn, .btn-sm,
input[type="reset"],
input[type="reset"]:not(:disabled):hover, 
input[type="reset"]:not(:disabled):focus {
	font-size:18px;
	color:var(--background);
	background-color:var(--txt);
	border: 2px solid var(--txt);
	border-radius:6px;
	padding:18px 43px;
	min-width:145px;
	transition: color 200ms linear, background-color 200ms linear, border-color 200ms linear;
}

.subsection button:not(.navbar-toggler):not(.accordion-button):not(.ccm--ctrl-init), 
html .subsection input[type="button"], .subsection input[type="submit"], 
.subsection .btn, .subsection .btn-group-sm > .btn, .subsection .btn-sm,
.subsection input[type="reset"],
.subsection input[type="reset"]:not(:disabled):hover, 
.subsection input[type="reset"]:not(:disabled):focus {
	padding:3px 6px;
}

.btn-sm {
	min-width:36px;
}
button:not(.navbar-toggler):not(.accordion-button):not(.ccm--ctrl-init):not(:disabled):hover, 
button:not(.navbar-toggler):not(.accordion-button):not(.ccm--ctrl-init):not(:disabled):focus, 
.btn:not(.disabled):hover, .btn:not(.disabled):focus, .btn:not(.disabled).focus,
html input[type="button"]:not(:disabled):hover,
html input[type="button"]:not(:disabled):focus, 
input[type="submit"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):focus,
input[type="reset"] {
	color: var(--txt);
	background-color: var(--background);
	border: 2px solid var(--txt);
	transition: color 200ms linear, background-color 200ms linear, border-color 200ms linear;
}
button:not(.navbar-toggler):not(.accordion-button):not(.ccm--ctrl-init):disabled, 
html input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled, 
.btn.disabled, .btn-group-sm > .btn.disabled, .btn-sm.disabled {
	opacity:0.3;
}
.btn > span {
	line-height:27px;
	height:27px;	
}
.btn .fa {
	line-height:inherit;/*Warenkorb-Symbol innerhalb Button*/
}

.back {
	margin-top:24px;
	font-size:0.8em;
}
.back a {
	text-decoration:none;
	/*display:inline-flex;*/
}
.back .fa {
	margin-right:10px;
}
.text-opacity, .text-opacity * {
	color:var(--txt-light);
}
.form-control::placeholder { color: var(--txt-light); opacity: 1; }         /* Standard */
.form-control::-webkit-input-placeholder { color: var(--txt-light); }        /* Chrome/Safari/Opera */
.form-control:-ms-input-placeholder { color: var(--txt-light); }             /* Internet Explorer 10+ */
.form-control::-moz-placeholder { color: var(--txt-light); opacity: 1; }     /* Firefox 19+ */
.form-control:-moz-placeholder { color: var(--txt-light); opacity: 1; }

footer {
	flex-shrink: 0;/*Sticky Footer*/
	background-color:var(--bg-highlight);
	margin-top:36px;
	padding-top:36px;
	padding-bottom:36px;
}
footer a {
	text-decoration:none;
	margin-right: 24px;
}

@media (min-width:768px){
	.order p.me-auto {
		/*margin-top:1rem;
		margin-bottom:0;*/
		width:auto;
		margin-bottom: 1rem;
	}
	header > img,
	header > .img {
		bottom:42px;
	}
	header > .img img {
		width:228px;
	}
	header .btn {
		font-size:18px;
		top:52px;
		padding:17px 24px;
		display:flex;
		align-items:center;
	}	
	header .btn span {
		margin-right:10px;
	}
	header .cart img {
		margin-left:10px;
	}
/*	header .cart .tix {
		right:44px;
	}*/
}
@media (min-width:992px){
	html, html body {
		font-size:16px;
	}
	h1, .h1, h2, .h2, h3, .h3 {
		font-weight:800;
	}
	h1, .h1 {
		font-size:164px;
		margin-bottom:64px;
	}
	h2, .h2 {
		font-size:74px;
		margin-bottom:44px;
	}
	h3, .h3 {
		font-size:44px;
	}
	h4, .h4 {
		font-size:24px;
	}
	header {
		padding-bottom:32.656%;
	}
	
	.Content {
		margin-top:32px;
	}
	section {
		margin-top:64px;
		margin-bottom:128px;
	}
	.subsection h4 {
		margin-bottom:1.5rem;
	}
	.smallgutters {
		margin-bottom:24px;
	}
	.Content .accordion-button {
		font-size:32px;
	}
	.form-control, .form-select {
		font-size:18px;
	}
	form.order {
		margin-left:-12px;
		margin-right:-12px;
		width:calc(100% + 24px);
	}
	form.order > * {
		font-size:18px;
		margin:8px 12px;
	}
	form.order > * > strong {
		font-size:24px;	
	}
}
@media (min-width:1200px){
	main, .Content {
		font-size:22px;
	}
	
	.subsection {
		padding:18px 24px;
	}	
	.subsection .card-img-top {
		top:-18px;
		left:-24px;
		width:calc(100% + 48px);
	}
}
@media (min-width: 1400px) {
	.narrow {
	  	margin-left:auto;
	  	margin-right:auto;
  		max-width: 1140px;
	}
}