@charset "utf-8";
/* CSS Document: FSK */


/*-----------------------------------------------------------------------------------*/
/*	Font-Familien
/*-----------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Over+the+Rainbow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*	GENERAL
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

/* ------------------------------------------------------------------ */
/* Reset: 
/* ------------------------------------------------------------------ */
* {
	margin:0;
	padding:0;
	outline:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
}

/* ------------------------------------------------------------------ */
/* Base:
/* ------------------------------------------------------------------ */
html, body, 
header, slide, container, column, columns, block, bgimg, img {
	height:100%;
	width:100%;
	display:block;
}
html, body {scroll-behavior:smooth;}
html {background-color:none;}
hr {border-image:none;}
h1, h2, h3, h4, h5, h6, 
container, p, slide, zitat, .acordeon {
	font-size:100%;
	font-style:normal;
	font-weight:normal;
	line-height:normal;
	-webkit-font-smoothing:antialiased;
	font:inherit;
}
a {
	text-decoration:none;
	text-rendering:optimizeLegibility;
}
ul, ol {list-style:none;}

/* ------------------------------------------------------------------ */
/* Sticky Nav-top
/* ------------------------------------------------------------------ */
.et-hero-tabs-container { 
	display:flex;
	flex-direction:row; /* @media (min-width: 800px) ändern in column */
	position:absolute;
	bottom:0; /* Position nav: Achtung beim scrollen, Werte ggf. anpassen */
	width:100%;
	height:60px; /* @media (min-width: 800px) ändern */
	box-shadow:0 0 20px rgba(0, 0, 0, 0.1); /* noch ändern */
	background:#b22222;opacity: 0.95;
	z-index:10;
}
.et-hero-tabs-container--top {
	position:fixed;
	top:0; /* Position nav oben: Achtung beim scrollen, Werte ggf. anpassen */
}
.et-hero-tab, .extra-tab {
	display:flex;
	justify-content:center;
	align-items:center;
	flex:1;
	color:#fff;
	letter-spacing:0.1rem;
	transition:all 0.5s ease;
	font-size:40px;
}
.et-hero-tab:hover, .extra-tab:hover {
	color:#fff;
	background:#4682B4;
	transition:all 0.5s ease;
}
.et-hero-tab-slider, .extra-tab-slider {
	position:absolute;
	bottom:0;
	width:0;
	height:6px;
	background:#b22222;
	transition:left 0.3s ease;
}

/* ------------------------------------------------------------------ */
/* Sticky Nav-extra
/* ------------------------------------------------------------------ */
.extra-tabs-container {
	margin-top:100px;
	display:flex;
	flex-direction:row; /* @media (min-width: 800px) ändern in column */
	position:flexible;
	bottom:0; /* Position nav: Achtung beim scrollen, Werte ggf. anpassen */
	width:100%;
	height:70px; /* @media (min-width: 800px) ändern */
	box-shadow:0 0 20px rgba(0, 0, 0, 0.1); /* noch ändern */
	background:#b22222;
	z-index:10;
}

/* ------------------------------------------------------------------ */
/* js-Hinweis
/* ------------------------------------------------------------------ */
#cookiedingsbums a {color:#000; text-decoration:none;}

#cookiedingsbums a:hover {text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
   outline: 1px solid #7b92a9; 
   text-align:center; 
   border-top:1px solid #fff;
   background: #BED747; 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#BED747', endColorstr='#f2f6f9',GradientType=0 ); 
   position:fixed;
   top:10%; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;}

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #BED747; /* Old browsers */
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 ); 
 }

#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}

/* ------------------------------------------------------------------ */
/* Linkeffekt:
/* ------------------------------------------------------------------ */
L1 > a {
	position:relative;
	color:#FFB958;
	 text-decoration-line:underline;
	text-decoration-style:dotted;
	text-decoration-color:#1B8E1B;
        -moz-text-decoration-line:underline;
       -moz-text-decoration-style:dotted;
       -moz-text-decoration-color:#1B8E1B;
     -webkit-text-decoration-line:underline;
    -webkit-text-decoration-style:dotted;
    -webkit-text-decoration-color:#1B8E1B;
}
L1 > a:hover {
	color:#1B8E1B;
}
L1 > a:before {
	content:"";
	position:absolute;
	width:100%;
	height:2px;														/*linienstärke*/
	bottom:1px;														/*linienabstand zum text*/
	left:0;
	background-color:#B22222;										/*underline-farbe bei hover*/
	visibility:hidden;
	-webkit-transform:scaleX(0);
	        transform:scaleX(0);
	-webkit-transition:all 0.5s ease-in-out 0s;
	        transition:all 0.5s ease-in-out 0s;
}
L1 > a:hover:before {
	visibility:visible;
	-webkit-transform:scaleX(1);
	transform:scaleX(1);
}

.container-cloud { /* Orte für FSK */
  display: none;
}

/* ------------------------------------------------------------------ */
/* Scroll to Top
/* ------------------------------------------------------------------ */
#arrow {
	position:fixed;
	right:2%;
	bottom:3%;
}
#chevron {
	width:80px;
	height:80px;
	line-height:80px;
	font-size:40px;
	text-align:center;
	color:#b22222;
	background:rgba(0,0,0,0); /* transparent */
	border-radius:50%;
	box-shadow:0 8px 8px #222;
	border:1px solid #b22222;
	display:block;
	overflow:hidden;
	position:relative;
}
#back {
	position:absolute;
	left:0; 
	top:100%;
	width:100%; 
	height:100%;
	background:#C9484E;
	z-index:-1;
}

/* ------------------------------------------------------------------ */
/* Slidemenu rechts: Telefonnummer https://wp-styles.de/telefon-links-website-einsteiger-guide-1330/
/* ------------------------------------------------------------------ */
#slidemenu {
	position:fixed;
	z-index:+10;
	right:-210px;
	top:14%;
	width:auto;
			border-bottom-left-radius:50px;
	-webkit-border-bottom-left-radius:50px;
	   -moz-border-bottom-left-radius:50px;
			border-top-left-radius:50px;
	-webkit-border-top-left-radius:50px;
	   -moz-border-top-left-radius:50px;
	margin:0;
	padding:0;
	}
#slidemenu:hover {
	right:0;
	width:auto;
	background:#4682B4;
	}
#slidemenu {
	transition:1.0s;
	}
#slidemenu a {
	position:relative;
	left:0;
	}
#slidemenu a:focus {
	left:-7em;
	}
#slidemenu a {
	transition:0.8s;
	}
#slidemenu:hover a:focus {
	left:0;
	background:none;
	}
#slidepic {	
	width:50px;
	height:50px;
	line-height:50px;
	font-size:40px;
	text-align:center;
	color:#b22222;
	background:#fff;
		 border-radius:50%;
		-webkit-radius:50%;
		   -moz-radius:50%;
			 -o-radius:50%;
			box-shadow:0px 0px 4px #222;
	-webkit-box-shadow:0px 0px 4px #222;
	   -moz-box-shadow:0px 0px 4px #222;
		 -o-box-shadow:0px 0px 4px #222;
	border:1px solid #b22222;
	}
#slidebox a{
	color:#fff;
	font-family: 'Dosis', sans-serif;
	font-weight:500;
	font-style:regular;
	font-size:34px;
	padding:0 20px;
	top:3px;
	}
#slidebox, #slidepic {
	float:left;
}

/* ------------------------------------------------------------------ */
/* Header Styles
/* ------------------------------------------------------------------ */
header {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	width:100vw;
	height:100vh;
}
header img {max-width:400px;
}
.title {
	 -webkit-align-self:center;
	-ms-flex-item-align:center;
			 align-self:center;
	padding:2rem;
	text-align:center;
	width:100%;
	background:rgba(255, 255, 255, 0.9);
	opacity:0.9;
	filter:alpha(opacity=90);	/* IE */
		 oz-opacity:0.9;
	-webkit-opacity:0.9;
	- opera-opacity:0.9;
}
.footer {
	margin-top:100px;
	width:100%;
		   -webkit-box-pack:center;
	-webkit-justify-content:center;
		      -ms-flex-pack:center;
			justify-content:center;
}
.footer img {
	padding:100px 0px;
	max-width:300px;
}
img {
	max-width:800px;
	display:block;
	margin:20px auto;
}

/* ------------------------------------------------------------------ */
/* Typography:
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.et-hero-tab, .extra-tab {
	font-family: 'Dosis', sans-serif;
	font-weight:600;
	font-style:regular;
	letter-spacing:0px;
	text-transform:uppercase;
	border-image:none;
	-webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
         -o-hyphens: auto;
            hyphens: auto;
}
h1, h2, h3, h4, h5, h6 {
	color:#4682B4;
}
.et-hero-tab, .extra-tab {
	color:#fff;
}
p, .list, .list-d, .block, .acordeon {
	font-family: 'Dosis', sans-serif;
	font-weight:500;
	font-style:regular;
	letter-spacing:0px;
	border-image:none;
	-webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
         -o-hyphens: auto;
            hyphens: auto;
}
.zitat {
	color:#C9484E;
	font-family:'Over the Rainbow', cursive;
	font-weight:400;
	font-style:regular;
	font-size:40px;
	letter-spacing:1px;
	text-rendering:optimizeLegibility;
	border-image:none;
}
L1 > a > quelle {
	color:grey;
	font-size:10px;
}
.blau {color:#4682B4;}
.gelb {color:#FFB958;}
.rot, .tx-rot {color:#b22222;}
.tx-rot {font-weight:600;}
.tx-blau {font-weight:600;}
.tx-h1 {font-weight:300;font-size:50%;margin-top:-30px;}
.grün {color:#20961A;}
.weiss {color:#ffffff;}
.ort {display:none;} /* Ortsangaben */
.tx-notx {display:none;}
.list {
	font-size:24px;
	line-height:1.4em;
	list-style-type:"\2713\00A0";
	list-style-position:outside; 
	color:#b22222;
	padding:0px 0px 0px 5%;
}
.mitte {text-align:center;}
.kursiv {font-style:italic;}
.fett {font-weight:600;}

/* ------------------------------------------------------------------ */
/* Grid:
/* ------------------------------------------------------------------ */
.container {
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
}
.column,
.columns {
  width:100%;
  float:left;
  box-sizing:border-box;
}

/* ------------------------------------------------------------------ */
/* Clearing:
/* ------------------------------------------------------------------ */
.container:after,
.row:after,
.u-cf {
  content:"";
  display:table;
  clear:both;
}

/* ------------------------------------------------------------------ */
/* Images:
/* ------------------------------------------------------------------ */
img {
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
.extra-tab img {max-width:100px;
}

/* ------------------------------------------------------------------ */
/* Acordeon:
/* ------------------------------------------------------------------ */
.acordeon {
  position:relative;
  margin-top:3px;
  width:100%;
  color:#fff;
  overflow:hidden;
}
input {
  position:absolute;
  opacity:0;
  z-index:-1;
}
label {
  position:relative;
  display:block;
  padding:0 0 0 1.1em;
  background:#4682B4;
  font-size:24px;
  line-height:3;
  cursor:pointer;
}

label > span {float:right;width:80px;background:#b22222;color:#b22222;}

.acordeon-content {border:1px solid #b22222;border-top-width:0px;
	max-height:0;
	overflow:hidden;
	background:#fff;
	-webkit-transition:max-height .15s;
		 -o-transition:max-height .15s;
		    transition:max-height .15s;
}
.acordeon-content p {
  margin:0 1em;
}
/* :checked */
input:checked ~ .acordeon-content {
  max-height:100%;
}
/* Icon */
label::after {
	font-size:70px;
	background:#b22222;
	position:absolute;
	right:5px;
	top:1px;
	display:block;
	width:1em;
	height:1em;
	border-radius:50%;
	line-height:0.8;
	text-align:center;
	-webkit-transition:all .55s;
		 -o-transition:all .55s;
			transition:all .55s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

/* ------------------------------------------------------------------ */
/* Section: Main
/* ------------------------------------------------------------------ */
#slide {
	background:#fffffff;
	padding:40px 0px;
}
#slide h1 {
	line-height:1.0em;
	margin-top:100px;
	font-size:80px;
}
#slide h2 {
	line-height:1.0em;
	margin-top:100px;
	font-size:60px;
}
#slide h3 {
	line-height:1.0em;
	padding-top:40px;
	font-size:30px;
}
#slide h4 {
	line-height:1.0em;
	padding-top:24px;
	font-size:20px;
}
#slide p {
	font-size:24px;
	color:#4682B4;
	line-height:1.4em;
	padding:20px 0px;
}
#slide hr {
	border:none;
	height:80px;
	width:100%;
	margin-top:80px;
	position:relative;
    background:url(icon.png) center center no-repeat;
	background-size:contain;
	}
#slide hr::before, #slide hr::after {
	width:46%;
	}
#slide hr::before {
	content:"";
	background-image:linear-gradient(270deg, #b22222, transparent);
	height:1px;
	display:block;
	position:absolute;
	top:46px;
	left:0;
}
#slide hr::after {
	content:"";
	background-image:linear-gradient(90deg, #b22222, transparent);
	height:1px;
	display:block;
	position:absolute;
	top:46px;
	right:0;
}

/* ------------------------------------------------------------------ */
/* Zitat:
/* ------------------------------------------------------------------ */
#reviews {
	margin:100px 0px;
	background:#ffff;
	background-position:center;
	padding:0px;
	height:auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	width:100%;
}
.content {max-width:100%;
	-webkit-align-self:center;
	-ms-flex-item-align:enter;
	align-self:center;
	text-align:center;
}
#reviews p {margin:0;
	font-size:48px;
	padding:100px 20px;
	text-transform:none;
	font-family:'Nothing You Could Do', cursive;
	color:#4682B4;
}

/* ------------------------------------------------------------------ */
/* Aktionsangebot:
/* ------------------------------------------------------------------ */
.rahmen {
	background: linear-gradient(#b22222, #b22222) 50% 50%/calc(100% - 40px) calc(100% - 40px) no-repeat,
	repeating-linear-gradient(45deg, #4682B4 0%, #4682b4 5%, #ffb958 5%, #ffb958 10%);
	border-radius:10px;
	padding:50px;
	box-sizing:border-box;
	width:100%;
}
#aktion {
	margin:50px 0px;
	background:#fff;
	background-position:center;
	padding:0px;
	height:auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	width:100%;
}
#aktion p {color:#fff;}

/* ------------------------------------------------------------------ */
/* Privatseite: Was mache ich, wenn´s brennt?
/* ------------------------------------------------------------------ */
.flex-container {
	display:flex;
	flex-direction:column;
	}
.flex-item {
	margin:0;
	padding:20px;
	background:#b22222;
	}
.flex-item:nth-of-type(2) {
	background:#4682B4;
}
#weiss p {color:#ffffff;}
#weiss h3 {color:#ffffff;font-size:50px;}

@media screen and (max-width:730px) {
.flex-container {flex-direction:column;}
}
@media screen and (min-width:730px) {
.flex-container {display:inline-flex;flex-direction:row;}
.flex-item {width:49%;}
#weiss h3 {font-size:30px;}
}
@media screen and (min-width:899px) {
#weiss h3 {font-size:40px;}
}
@media screen and (min-width:1480px) {
#weiss h3 {font-size:50px;}
}

/* ------------------------------------------------------------------ */
/* Unternehmensseite: Verhalten im Ernstfall
/* ------------------------------------------------------------------ */
.list-d {
	color:#b22222;
	font-size:24px;
	line-height:1.2em;
	list-style-type:circle;
	list-style-position:outside; 
	padding:0 3%;
}
li span {color:#4682B4;}

/*-----------------------------------------------------------------------------------*/
/*	1.0 Background-IMG
/*-----------------------------------------------------------------------------------*/
.bgimg-t1, .bgimg-t2, .bgimg-t3, .bgimg-t4, .bgimg-404 {
	z-index:-1;
	position:relative;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	width:100%;
	height:100%;
	align-items:center;
	justify-content:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	display:flex; 
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
			background-size:cover;
	-webkit-background-size:cover;
	   -moz-background-size:cover;
	     -o-background-size:cover;
}

.bgimg-t1, .bgimg-t2, .bgimg-t3, .bgimg-t4, .bgimg-404 {height:100%;} /* Titel-Bilder auf allen Seiten */
.bgimg-t1 {background-image: url(/box/fsk-i-480.jpg);}
.bgimg-t2 {background-image: url(/box/fsk-p-480.jpg);}
.bgimg-t3 {background-image: url(/box/fsk-g-480.jpg);}
.bgimg-t4 {background-image: url(/box/fsk-d-480.jpg);}
.bgimg-404 {background-image: url(/box/404.jpg);}

/*-----------------------------------------------------------------------------------*/
/*-- @media: max-479
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media (max-width:479px) {
.bgimg-t1 {background-image: url(/box/fsk-i-480.jpg);}
.bgimg-t2 {background-image: url(/box/fsk-p-480.jpg);}
.bgimg-t3 {background-image: url(/box/fsk-g-480.jpg);}
.bgimg-t4 {background-image: url(/box/fsk-d-480.jpg);}
.bgimg-404 {background-image: url(/box/404.jpg);}
}
/*-- @media: min-480
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media (min-width:480px) {
.bgimg-t1 {background-image: url(/box/fsk-i-720.jpg);}
.bgimg-t2 {background-image: url(/box/fsk-p-720.jpg);}
.bgimg-t3 {background-image: url(/box/fsk-g-720.jpg);}
.bgimg-t4 {background-image: url(/box/fsk-d-720.jpg);}
.bgimg-404 {background-image: url(/box/404.jpg);}
}
/*-- @media: min-720
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media (min-width:720px) {
.bgimg-t1 {background-image: url(/box/fsk-i-1024.jpg);}
.bgimg-t2 {background-image: url(/box/fsk-p-1024.jpg);}
.bgimg-t3 {background-image: url(/box/fsk-g-1024.jpg);}
.bgimg-t4 {background-image: url(/box/fsk-d-1024.jpg);}
.bgimg-404 {background-image: url(/box/404.jpg);}
}
/*-- @media: min-1024
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media (min-width:1024px) {
.bgimg-t1 {background-image: url(/box/fsk-i-1920.jpg);}
.bgimg-t2 {background-image: url(/box/fsk-p-1920.jpg);}
.bgimg-t3 {background-image: url(/box/fsk-g-1920.jpg);}
.bgimg-t4 {background-image: url(/box/fsk-d-1920.jpg);}
.bgimg-404 {background-image: url(/box/404.jpg);}
}
/*-- @media: extra
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media (min-width:1921px) {
.bgimg-t1 {background-image: url(/box/fsk-i.jpg);}
.bgimg-t2 {background-image: url(/box/fsk-p.jpg);}
.bgimg-t3 {background-image: url(/box/fsk-g.jpg);}
.bgimg-t4 {background-image: url(/box/fsk-d.jpg);}
.bgimg-404 {background-image: url(/box/404.jpg);}
}

/*-----------------------------------------------------------------------------------*/
/*	2.0 Bilder und Grafiken
/*-----------------------------------------------------------------------------------*/
img, bgimg {border:none;display:block;margin:0 auto;}
.imagewrapper {position:center;}
.imagewrapper img {max-width:1000px;width:100%;margin:0 auto;padding:0;}

#logo {/*Logo auf allen Seiten*/
	width:100%;
	max-width:80px;
	margin:0 auto;
	border:none;
}


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*	MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

/*-- Navigation small
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (max-width:260px) {
.et-hero-tabs-container {flex-direction:column;height:auto;position:relative;}
.extra-tabs-container {flex-direction:column;height:auto;position:relative;}
.et-hero-tab, .extra-tab {font-size:20px;padding:8px 0px;}
}
@media screen and (min-width:260px) and (max-width:620px) {
.extra-tabs a {font-size:20px;}
}
@media screen and (min-width:260px) and (max-width:620px) {
.et-hero-tabs-container {flex-direction:column;height:auto;position:relative;}
.et-hero-tab, .extra-tab {font-size:30px;padding:8px 0px;}
.et-hero-tab-slider, .extra-tab-slider {height:0;}
}
@media screen and (min-width:620px) and (max-width:1023px) {
.et-hero-tabs-container {height:50px;}
.et-hero-tab, .extra-tab {font-size:26px;padding:12px 0px;}
.et-hero-tab-slider, .extra-tab-slider {height:2px;}
}

/*-- Accordeon small
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (max-width:479px) {
label {font-size:13px;}
label > span {width:48px;background:#b22222;color:#b22222;}
label::after {font-size:37px;}
.list-d {font-size:14px;line-height:1.2em;padding:0 6%;}
}
@media screen and (min-width:479px) and (max-width:719px) {
label {font-size:18px;}
label > span {width:62px;background:#b22222;color:#b22222;}
label::after {font-size:53px;}
.list-d {font-size:16px;line-height:1.2em;padding:0 5%;}
}
@media screen and (min-width:719px) and (max-width:1023px) {
label {font-size:22px;}
label > span {width:74px;background:#b22222;color:#b22222;}
label::after {font-size:64px;}
.list-d {font-size:20px;line-height:1.2em;padding:0 6%;}
}


/*-- @media: max-479
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (max-width:479px) {
.container {width:96%;}
.zitat {font-size:16px;}
.list {margin-left:5%;}
#slide {padding:20px 0px;}
#slide h1 {margin-top:50px;font-size:40px;}
.tx-h1 {margin-top:-10px;}
#slide h2 {margin-top:50px;font-size:30px;}
#slide h3 {padding-top:20px;font-size:20px;}
#slide h4 {padding-top:12px;font-size:12px;}
#slide p, .list {font-size:14px;line-height:1.2em;padding:10px 0px;}
#slide hr {margin-top:50px;}
#slide hr {height:50px;}
#slide hr::before, #slide hr::after {top:30px;width:40%;}
#slidemenu {right:-212px;top:20%;}
#reviews p {font-size:28px;padding:100px 20px;}
#chevron {width:50px;height:50px;line-height:50px;font-size:30px;}
#arrow {width:50px;right:8px;}
.footer img {max-width:260px;}
.rahmen {background: linear-gradient(#b22222, #b22222) 50% 50%/calc(100% - 10px) calc(100% - 10px) no-repeat,
		repeating-linear-gradient(45deg, #4682B4 0%, #4682b4 5%, #ffb958 5%, #ffb958 10%);padding:20px;}
/* ------------------------------------------------------------------ */
}

/*-- @media: 479-719
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (min-width:479px) and (max-width:719px) {
.container {width:94%;}
.zitat {font-size:22px;}
.list {margin-left:5%;}
#slide {padding:40px 0px;}
#slide h1 {margin-top:50px;font-size:50px;}
.tx-h1 {margin-top:-20px;}
#slide h2 {margin-top:50px;font-size:40px;}
#slide h3 {padding-top:30px;font-size:30px;}
#slide h4 {padding-top:16px;font-size:20px;}
#slide p, .list {font-size:18px;line-height:1.1em;padding:14px 0px;}
#slide hr {margin-top:50px;}
#slide hr::before, #slide hr::after {top:48px;width:40%;}
#slidemenu {right:-212px;top:20%;}
#reviews p {font-size:38px;padding:100px 20px;}
#chevron {width:50px;height:50px;line-height:50px;font-size:30px;}
#arrow {width:50px;right:8px;}
img {max-width:340px;}
.rahmen {background: linear-gradient(#b22222, #b22222) 50% 50%/calc(100% - 15px) calc(100% - 15px) no-repeat,
		repeating-linear-gradient(45deg, #4682B4 0%, #4682b4 5%, #ffb958 5%, #ffb958 10%);padding:20px;}
/* -------------------------------------------------------------------- */
}

/*-- @media: 719-899
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (min-width:719px) and (max-width:899px) {
.container {width:92%;}
.zitat {font-size:32px;}
#arrow {bottom:5%;}
#slide {padding:40px 0px;}
#slide h1 {margin-top:70px;font-size:60px;}
.tx-h1 {margin-top:-25px;}
#slide h2 {margin-top:70px;font-size:50px;}
#slide h3 {padding-top:70px;font-size:30px;}
#slide h4 {padding-top:24px;font-size:20px;}
#slide p {font-size:22px;line-height:1.2em;padding:20px 0px;}
#slide hr {margin-top:70px;}
#slide hr::before, #slide hr::after {top:48px;width:44%;}
#reviews p {font-size:48px;padding:100px 20px;}
#chevron {width:50px;height:50px;line-height:50px;font-size:30px;}
#arrow {width:50px;right:18px;}
img {max-width:400px;}
.rahmen {background: linear-gradient(#b22222, #b22222) 50% 50%/calc(100% - 20px) calc(100% - 20px) no-repeat,
		repeating-linear-gradient(45deg, #4682B4 0%, #4682b4 5%, #ffb958 5%, #ffb958 10%);padding:30px;}
/* -------------------------------------------------------------------- */
}

/*-- @media: 899-1023
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (min-width:899px) and (max-width:1023px) {
.container {width:90%;}
#slide hr::before, #slide hr::after {top:48px;width:45%;}
#chevron {width:60px;height:60px;line-height:60px;font-size:30px;}
#arrow {width:60px;right:18px;}
img {max-width:460px;}
.rahmen {background: linear-gradient(#b22222, #b22222) 50% 50%/calc(100% - 25px) calc(100% - 25px) no-repeat,
		repeating-linear-gradient(45deg, #4682B4 0%, #4682b4 5%, #ffb958 5%, #ffb958 10%);padding:40px;}
/* ------------------------------------------------------------------ */
}

/*-- @media: max-1480
  –––––––––––––––––––––––––-----------------------------------------------------------------------------------------------------––––––––––––––––––––––––– */
@media screen and (min-width:1023px) and (max-width:1480px) {
.container {width:88%;}
#slide hr::before, #slide hr::after {top:48px;width:45%;}
#chevron {width:70px;height:70px;line-height:70px;font-size:30px;}
#arrow {width:70px;right:18px;}
.rahmen {background: linear-gradient(#b22222, #b22222) 50% 50%/calc(100% - 30px) calc(100% - 30px) no-repeat,
		repeating-linear-gradient(45deg, #4682B4 0%, #4682b4 5%, #ffb958 5%, #ffb958 10%);padding:50px;}
/* ------------------------------------------------------------------ */
}