@charset "UTF-8";
/*!
 * kapsdesign
 * Erstellt:    09.08.2020
 * Änderung:    28.10.2020 
 * Änderung:	06.06.2021	Preisänderungen
 */
/* ********************************************************************************* Variablen */
:root {
  --txtColor-head: rgba(16,35,44,1.00);			/* Headline Textfarbe */
  --txtColor-redHead: rgba(171,8,8,1.00);
  --btnTxtColor-0: rgba(26,55,70,1.00);			            /* Buttonfarbe 0 */
  --btnTxtColor-1: rgba(225,225,223,0.96);
  --btnTxtColor-2: rgba(0,124,136,1.00);
  --btnFooterColor-0: rgba(26,55,70,0.5);
  --btnBorderBottom: rgba(29,62,78,1.00);
  --bildBorder: rgba(29,62,78,0.35);
  --articleBorder: rgba(29,62,78,0.2);
  --mainBackground: rgba(242,242,240,1.00);
  --mainBorder: rgba(43,52,58,.30);
  --navPCBackground: rgba(225,225,223,0.96);	/* rgba(242,242,240,0.95); */
  --weiss: rgba(244,246,247,1.00);
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --ff-sans-serif: "IBM Plex Serif", Helvetica, "Times New Roman", serif;
}

/* ********************************************************************************* Variablen ENDE */
/* ********************************************************************************* Standard */
html{
    height: 100%;
}
body{
    height: 100%;
    background-color: rgba(249,249,245,1.00);
/*
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
*/   
}
img{
	max-width: 100%;
	border: none;
}
/* ********************************************************************************* Standard ENDE */



/* ********************************************************************************* Typo */
h1,h2,h3,h4,h5,h6,p{
    -webkit-hyphens:auto;                     /* Silbentrennung */
    -webkit-hyphenate-limit-chars: auto 5;    /* mindestens 5 Buchstaben */
    -webkit-hyphenate-limit-lines: 2;         /* Zahl der Silbentrennungen in Folge */
        -ms-hyphens:auto;
        -ms-hyphenate-limit-chars: auto 5;
        -ms-hyphenate-limit-lines: 2;
         -o-hyphens:auto;
         -o-hyphenate-limit-chars: auto 5;
         -o-hyphenate-limit-lines: 2;
            hyphens:auto;
            hyphenate-limit-chars: auto 5;
            hyphenate-limit-lines: 2;   
}
h1{
    margin: 80px 0 40px 0;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 300;
	font-size: calc(26px + 1.5vw);
    color: var(--txtColor-head);
}
main.start h1{
    margin: 80px 0 40px 20px;
}

h1 span{
    display: block;
    margin: 10px 0 0 160px;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 500;
	font-size: calc(16px + 0.5vw);
    color: var(--txtColor-head);
}
h2{
    margin: 30px 0 22px 0;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 300;
	font-size: calc(18px + 1vw);
    color: var(--txtColor-head);
}
main.start h2{
    margin-top: 80px;
    margin-bottom: 60px;
}
h3{
    margin: 16px 0 16px 0;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(16px + 0.7vw);
    color: var(--txtColor-head);
}
h4{
    margin: 18px 0 12px 0;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(14px + 0.5vw);
    color: var(--txtColor-head);
}
h5{
    margin: 18px 0 12px 0;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(14px + 0.5vw);
    color: var(--txtColor-head);
}
.rot{
	color: rgba(176,9,9,1.00);
}
p{
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 200;
	font-size: clamp(14px, 18px, 24px ) !important;
    line-height: clamp(18px, 22px, 28px ) !important;
    color: var(--txtColor-head);
}
p.wichtig{
    font-style: normal;
    font-weight: 500;
}
article ul{
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 200;
	font-size: calc(16px + 0.5vw);
    line-height: calc(20px + 0.7vw);
}
article ul li{
    color: var(--txtColor-head);
}
/* ********************************************************************************* Typo ENDE */



/* ********************************************************************************* Header */
header{
    position: relative;
    top: 0;
    left: 0;
    height: auto;
}
header div picture{
    padding: 0 !important;
}
/* ********************************************************************************* Header Ende */



/* ********************************************************************************* Startseite */
/*
 * h1 auf der Startseite */
picture + h1{
    margin-top: clamp(-90px, -120px, -150px ) !important;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 700;
    text-align: right;
    color: rgba(231,239,245,0.90);
    font-size: clamp(2rem, 3vw, 3rem ) !important;
    text-shadow: 3px 3px 3px rgba(10,17,49,1.00);
}
/* ********************************************************************************* Startseite ENDE */




/* ********************************************************************************* Main */
.artikelAbstand{
    margin-bottom: 40px;            /* Abstand zwischen den Artikeln */
}
main{
    
    background-color: var(--mainBackground);
    border-left: 1px solid var(--mainBorder);
    border-right: 1px solid var(--mainBorder);
    border-bottom: 1px solid rgba(43,52,58,0);
    margin-top: 0;
    
}
main.start{
    margin-top: 0;
}
main section figure img{
    height: 130px;
}
main section{
    margin-bottom: 3vw;
}
/* Inhaltsseiten */
main section article.erster{
    margin-top: 5vw;
    display: flex;
}
main section article.erster figure{
    margin-left: 30px;
    width: 100px;
}
/*
 * Einleitung bei den Apartments
 */
article.info{
    padding-left: 50px;
    margin-bottom: 3vw;
}
/*
 * Komponente 1    komp01
 * Ko,ponente 2    komp02
 * Bild-Text Gruppe, das Bild befindet sich links und der Text rechts.
 * der Text wird an die Unterkannte des Bild gesetzt.
 *
 * Optional:
 * Am Ende des Textes befindet sich ein Link zu weiteren Informationen 
 * für das Thema
 */
article.komp01{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 15px !important;
    background-color: rgba(255,255,255,1.00);
    margin-bottom: 0 !important;
}
article.akomp01 figure{
    margin: 0;
    padding: 0;
    border: 1px solid var(--bildBorder);
    width: 100%;
}
article.komp01 div{
    padding: 0 10px 10px 20px;
    margin: 0;
    width: 100%;
}
/* *** Ende komp01 */
article.komp02{
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    padding: 15px !important;
    background-color: rgba(255,255,255,1.00);
}
article.komp02 figure{
    margin: 0;
    padding: 0;
    border: 1px solid var(--bildBorder);
    width: 100%;
}
article.komp02 div{
    padding: 0 10px 10px 20px;
    margin: 0;
    width: 100%;
}

article span{
    display: flex;
}
article span a:link,
article span a:active,
article span a:visited{
    display: flex;
    width: 300px;
    margin: 0 20px 0 0;
    padding: 0 10px 2px 10px;
    text-decoration: none;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: calc(12px + 0.5vw);
    color: rgba(26,55,70,1.00);
    border-bottom: 1px solid rgba(26,55,70,0.35);
    border-left: 4px solid rgba(26,55,70,0.35);
}
article span a:hover{
    color: rgba(0,124,136,1.00);
    border-bottom: 1px solid rgba(0,124,136,1.00);
    border-left: 4px solid rgba(0,124,136,1.00);
}
article span a b{
    padding: 4px 10px 0 0;
}
/* *** Ende komp02 */



/*
 * span-Element für weiterführende Informationen "Bitte mehr lesen"
 * wie beispielsweise auf der Hauptseite der Apartments.
 */
/*
article span{
    display: flex;
}
article span a:first-child{
    margin-right: 40px;
}
article span a:link,
article span a:active,
article span a:visited{
    display: flex;
    justify-content: space-between;
    width: 300px;
    margin: 0;
    padding: 0 10px 2px 4px;
    text-decoration: none;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(12px + 0.5vw);
    color: rgba(26,55,70,1.00);
    border-bottom: 1px solid rgba(26,55,70,0.35);
}
article span a:hover{
    color: rgba(0,124,136,1.00);
    border-bottom: 1px solid rgba(0,124,136,1.00);
}
*/



/* ********************************************************************** Preisliste */
article ul.zeiten{
	margin: 0 0 3rem 0.5rem;
	padding: 0;
	font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));
}
article ul.zeiten li{
	list-style: none !important;
	margin: 0 0 6px 0;
}
article table th{
	font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 600;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
}
article table td{
	font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
}



article ul.preise{
	margin: 0 0 3vw 0;
	padding: 0;
	list-style: none;
	font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: clamp(0.9rem, 1.4vw, 1.5rem);
}
article ul.preise li{
	margin: 0 0 1vw 0;
}
article ul.preise li span{
	display: inline;
    font-style: normal;
    font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.6rem);
	margin: 0 1.2vw 0 2vw;
}
ul.preise li em{
    font-style: normal;
    font-weight: 300;
}
p.preis span{
	display: inline;
    font-style: normal;
    font-weight: 400;
	font-size: clamp(1rem, 1.6vw, 1.6rem);
	margin: 0 1.2vw 0 2vw;
}
p.preis em{
	font-style: normal;
    font-weight: 300;
}
/* ********************************************************************** Preisliste ENDE */



/* ********************************************************************** Über uns */
main.mazura section.raster{
    display: grid;
    width: 100%;
    grid-template-columns: 33.333% 33.333% 33.333%;
    grid-gap: 20px;
}
main.mazura article{
    border: none;
    padding: 10px;
}
main.mazura article.a1{
    grid-column: 1/4;
    grid-row: 1/2;
    
    display: flex;
    align-items: flex-end;
    background-color: rgba(255,255,255,0);
    padding: 10px;
}
main.mazura article.a1 figure{
    width: 170vw;
    padding-right: 20px;
}
main.mazura article.a2{
    grid-column: 1/3;
    grid-row: 2/3;
}
main.mazura figure.a3{
    grid-column: 3/4;
    grid-row: 2/3;
}
main.mazura figure.a4{
    grid-column: 1/2;
    grid-row: 4/5;
}
main.mazura figure.a5{
    grid-column: 2/3;
    grid-row: 4/5;
}
main.mazura figure.a6{
    grid-column: 3/4;
    grid-row: 4/5;
}
main.mazura article.a7{
    grid-column: 1/3;
    grid-row: 5/6;
}
main.mazura figure.a8{
    grid-column: 1/2;
    grid-row: 6/7;
}
main.mazura figure.a9{
    grid-column: 2/3;
    grid-row: 6/7;
}
main.mazura article.a10{
    grid-column: 1/3;
    grid-row: 7/8;
}
main.mazura article.a11{
    grid-column: 3/4;
    grid-row: 7/8;
}
main.mazura figure.a12{
    grid-column: 1/4;
    grid-row: 8/9;
}
main.mazura article.a13{
    grid-column: 1/4;
    grid-row: 9/10;
}

/* ********************************************************************** Über uns ENDE */
/* ********************************************************************** Galerie */
.galerie{
    display: grid;            
    grid-template-columns: 33.3333% 33.3333% 33.3333%;
}
.galerie figure{
	box-sizing: border-box;
    margin: 0;
    padding: 4px;
    background:    rgba(234, 83, 66, 0) !important;
    /*border: 1px    solid rgb(30, 77, 123);*/
    /*border-radius: 0.2rem;*/
}
.galerie figure.a{ grid-column: 1/4; grid-row: 1/2; }

.galerie figure.b{ grid-column: 1/2; grid-row: 2/3; }
.galerie figure.c{ grid-column: 2/4; grid-row: 2/4; }
.galerie figure.d{ grid-column: 1/2; grid-row: 3/5; }
.galerie figure.e{ grid-column: 2/3; grid-row: 4/5; }
.galerie figure.f{ grid-column: 3/4; grid-row: 4/6; }
.galerie figure.g{ grid-column: 1/2; grid-row: 5/6; }
.galerie figure.h{ grid-column: 2/3; grid-row: 5/6; }

.galerie figure.i{ grid-column: 1/4; grid-row: 6/7; }
.galerie figure.j{ grid-column: 1/2; grid-row: 7/8; }
.galerie figure.k{ grid-column: 2/3; grid-row: 7/8; }
.galerie figure.l{ grid-column: 3/4; grid-row: 7/8; }

.galerie figure.m{ grid-column: 1/2; grid-row: 8/9; }
.galerie figure.n{ grid-column: 2/3; grid-row: 8/9; }
.galerie figure.o{ grid-column: 3/4; grid-row: 8/9; }

.galerie figure.p{ grid-column: 1/4; grid-row: 9/10; }
.galerie figure.q{ grid-column: 1/2; grid-row: 10/11; }
.galerie figure.r{ grid-column: 2/3; grid-row: 10/11; }
.galerie figure.s{ grid-column: 3/4; grid-row: 10/11; }

.galerie figure.t{ grid-column: 1/2; grid-row: 11/12; }
.galerie figure.u{ grid-column: 2/4; grid-row: 11/12; }
.galerie figure.v{ grid-column: 1/3; grid-row: 12/13; }
.galerie figure.w{ grid-column: 3/4; grid-row: 12/13; }

.galerie figure.x{ grid-column: 1/4; grid-row: 13/14; }
.galerie figure.y{ grid-column: 1/2; grid-row: 14/15; }
.galerie figure.z{ grid-column: 2/3; grid-row: 14/15; }
.galerie figure.aa{ grid-column: 3/4; grid-row: 14/15; }

/* ********************************************************************** Galerie ENDE */
/* ********************************************************************************* Main Ende */
/* ********************************************************************** Apartmentseiten */
/*section h1 + figure{
	padding-top: 10px;
	border: 1px solid var(--bildBorder);
}*/
section figure{
    
}
section figure figcaption{
    padding: 10px 0 6px 10px;
    background-color: rgba(215,215,205,1.00);
}
div.icons{
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
}
div.icons figure{
    margin-right: 6px;
}
div.icons figure img{
    cursor: pointer;
	border: 1px solid var(--bildBorder);
}
div.infos {
    margin-left: 0;
    margin-right: 0;
}
p.buchung a:link,
p.buchung a:active,
p.buchung a:visited{
    text-decoration: none;
    color: rgba(26,55,70,1.00) !important;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 500;
}
p.buchung a:hover{
    color: rgba(241,111,9,1.00);
    
}
p.buchung a b{
    padding: 4px 16px 0 0;
}

/* 	Die Iconbilder in den Apartments
	Da die Anzahl unterschiedlich ist läßt sich das leider nicht anders lösen.
*/
div.icons figure.ico{
	padding-right: 0;
	margin-right: 0;
}
div.icons figure.last{
	margin-right: 10px;
}
/* 	Iconbilder ENDE */
/* ********************************************************************** Apartmentseiten ENDE*/


/* ********************************************************************************* Formular */
form p.gruppe{
    margin-top: -8px;
    margin-left: 24px;
    padding: 0 20px 0 34px;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 300;
	font-size: calc(13px + 0.5vw);
    color: rgba(26,55,70,1.00);
}
form label{
    padding: 0 0 0 10px;
    font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 400;
	font-size: calc(12px + 0.2vw);
    color: rgba(26,55,70,1.00);
}
form textarea{
    height: 160px !important;
}
form div.taste{
    padding: 0;
}
/* 																	für Fehlermeldungen */
form label span{
    color: rgba(244,7,7,1.00);
     font-family: var(--ff-sans-serif);
    font-style: normal !important;
    font-weight: 300;
    font-size: calc(12px + 0.3vw);
    letter-spacing: 0.05rem;
}
p.gruppe span{
    color: rgba(244,7,7,1.00);
    font-family: var(--ff-sans-serif);
    font-style: normal !important;
    font-weight: 300;
    font-size: calc(12px + 0.3vw);
    letter-spacing: 0.05rem;
}
.web{visibility: hidden;}

/* ////////////////////////////////// checkbox Umschreiben */

input[type='checkbox']{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    width: 100%;
}
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked){
    background: transparent;
    position: relative;
    visibility: hidden;
    margin:0;
    padding:0;
}
input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before{
    content:' ';
    display:inline-block;
    width: 26px;
    height:26px;
    position: relative;
    top:6px;
    border: 1px solid #bbb;
    border-radius: 2px;
    background: white;
    margin: 16px 1rem 0 0;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}
input[type='checkbox']:hover  + label::before{
    background:#ddd;
    box-shadow: inset 0 0 0 2px white;
    cursor: pointer;
}
input[type='checkbox']:checked  + label::before{
    background-color: rgba(220,109,4,1.00);
    box-shadow: inset 0 0 0 2px white;
}
input[type='checkbox'] + label{
    display: block;
    margin: -14px 0 0 0;
    top: -10px;
    cursor: pointer;
}

/* ////////////////////////////////// checkbox Umschreiben ENDE */

div.konto{
	margin: 40px 0 0 30px;
}
div.konto ul{
	list-style: none !important;
	margin: 0 0 20px 0;
	padding: 0;
	
	font-family: var(--ff-sans-serif);
    font-style: normal;
    font-weight: 200;
	font-size: clamp(14px, 18px, 24px ) !important;
    line-height: clamp(18px, 22px, 28px ) !important;
    color: var(--txtColor-head);
}

/* ********************************************************************************* Formular ENDE */



/* ********************************************************************************* PC-Navi */
nav.pc{
    position: fixed;
    display: block;
    top: 10px;
    left: 0;
    width: 100%;
    background-color: var(--navPCBackground);
    padding: 0 0 6px 0;
}
nav.pc ul{
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
	justify-content:space-around; 
}
nav.pc ul li{
    margin: 0;
}
nav.pc ul li a:link,
nav.pc ul li a:active,
nav.pc ul li a:visited{
    display: block;
    text-decoration: none;
    font-family: var(--ff-sans-serif);
	font-style: normal;
  	font-weight: 400;
	font-size: calc(16px + 0.5vw);
    margin: 0;
    padding: 0;
    color: var(--btnTxtColor-0);
    border-bottom: 3px solid var(--btnTxtColor-1);
}
nav.pc ul li a:hover{
    padding: 0;
    color: var(--btnTxtColor-2);
    border-bottom: 3px solid var(--btnTxtColor-2);
}
nav.pc ul li.aktiv{
    font-family: var(--ff-sans-serif);
	font-style: normal;
  	font-weight: 400;
	font-size: calc(16px + 0.5vw);
    margin: 0;
    padding: 0;
    color: rgba(220,109,4,1.00);
}
nav.pc ul li.flagge{
    width: 50px;
    margin-top: -6px;   
}
nav.pc ul li.flagge a img{
    -webkit-box-shadow: 2px 2px 5px 1px rgba(50,50,50,0.4);
            box-shadow: 2px 2px 5px 1px rgba(50,50,50,0.4);
}
nav.start ul li.flagge a:hover{
    padding: 0;
    color: rgba(0,0,0,0);
    border-bottom: 3px solid rgba(0,0,0,0);
}

/* Navigation vom Statscreen */
nav.start ul{
    margin: 50px 0 0 0; 
}
nav.start figure img{
    margin-top: 10px;
    height: 80px;
}

	/* ********************************************************* PC-Navi ENDE*/
/* ********************************************************************************* PC-Navi */



/* ********************************************************************************* Mobile-Navi */
div.mobile-navbar{
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 54px;
    display: flex;
    justify-content: flex-end;
}
div.mobile-navbar a{
    display: block;
    width: 40px;
    margin: 10px 20px 0 0;
    text-decoration: none;
}
nav.mobile{
    position: absolute;
    top: -600px;
    width: 100%;
    -webkit-box-shadow: 1px 8px 10px -6px rgba(0,0,0,1);
            box-shadow: 1px 8px 10px -6px rgba(0,0,0,1);
}
nav.mobile ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
nav.mobile ul li:first-child{
    margin-top: 64px;
}
nav.mobile ul li a:link,
nav.mobile ul li a:active,
nav.mobile ul li a:visited{
    display: block;
    text-decoration: none;
    font-family: var(--ff-sans-serif);
	font-style: normal;
  	font-weight: 400;
	font-size: calc(18px + 0.5vw);
    color: var(--btnTxtColor-0);
    
    margin: 0 10px 0 10px;
    padding: 10px 0 10px 40px;
    background-color: rgba(255,255,255,1.00);
    border-bottom: 1px solid rgba(26,55,70,0.5);
}
nav.mobile ul li a:hover{
    color: var(--btnTxtColor-2);
    margin: 0 10px 0 10px;
    padding: 10px 0 10px 40px;
    background-color: rgba(205,213,217,0.90);
    border-bottom: 1px solid var(--btnTxtColor-2);
}
nav.mobile ul li.aktivMob{
    font-family: var(--ff-sans-serif);
	font-style: normal;
  	font-weight: 400;
	font-size: calc(18px + 0.5vw);
    color: rgba(220,109,4,1.00);
    
    margin: 0 10px 0 10px;
    padding: 10px 0 10px 40px;
    background-color: rgba(255,255,255,1.00);
    border-bottom: 1px solid rgba(26,55,70,0.5);
}
/* ********************************************************************************* Mobile-Navi ENDE*/



/* ********************************************************************************* Footer */
footer{
	height: 90px;
	background-color: rgba(255,255,255,1.00);
    border-top: 1px solid rgba(29,62,78,0.4);
}
footer .container{
	margin: 0 0 20px 4vw !important;
}

footer nav ul{
	list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
}
footer nav ul li a:link,
footer nav ul li a:active,
footer nav ul li a:visited{
    text-decoration: none;
    font-family: var(--ff-sans-serif);
	font-style: normal;
  	font-weight: 300;
	font-size: 18px;
    margin: 0 6px 0 0 !important;
    padding: 6px 10px 8px 10px;
    color: var(--btnFooterColor-0);
}
footer nav ul li:first-child{
    margin: 14px 0 0 0;
}
footer nav ul li:first-child a:hover{
    padding: 6px 10px 8px 10px;
    color: var(--btnTxtColor-2);
    border-bottom: 1px solid var(--btnTxtColor-2);
}
footer nav ul li.aktiv{
    font-family: var(--ff-sans-serif);
	font-style: normal;
  	font-weight: 300;
	font-size: 18px;
    margin: 0 6px 0 0;
    padding: 0 10px 8px 10px;
    color: rgba(220,109,4,1.00);
}
footer nav ul li a img{
	height: 50px;
}
footer nav figure{
    margin: 0;
	padding: 0;
}
footer nav figure img{
	max-width: 75%;
}
/* ********************************************************************************* Footer ENDE */



@media (min-width: 320px) {
    .container, .container-sm { max-width: 100%; }
    
    div.mobile-navbar{display: flex;}
    nav.pc{ display: none; }
    /* Typo */
    h1{margin: 10vw 0 40px 0; font-size: calc(16px + 1.5vw);}
    main.start h1{margin: 10px 0 20px 0;}
    /* Typo Ende */
    
    /* Inhaltsseiten */
    main section article.erster{margin-top: 4vw;}
    main section article.erster figure{margin-left: 5px;width: 90px;}
    
    article.komp01{ display: block; align-items: flex-end; padding: 15px !important; }
    article.komp01 figure{width: 100%; }
    article.komp01 div{margin: 12px 0 0 0;padding: 0 0 10px 20px;width: 100%;}
    
    article.komp02{display: block;align-items: flex-end;padding: 15px !important;}
    article.komp02 figure{width: 100%;}
    article.komp02 div{margin: 0;padding: 0 10px 10px 20px;width: 100%;}
    article span{display: flex;}
    article span a:link,
    article span a:active,
    article span a:visited{
        display: flex;
        width: 300px;
        margin: 0 20px 10px 0;
        padding: 0 10px 2px 10px;
        font-size: calc(12px + 0.5vw);
    }
	footer nav figure img{
		margin: 10px 0 0 2vw;
		max-width: 70%;
	}
	footer .container{
		margin: 0 auto 20px auto !important;
	}
}

@media (min-width: 576px) {
    .container, .container-sm { max-width: 576px; }
	
    div.mobile-navbar{display: flex;}
    nav.pc{ display: none; }
    /* Typo */
    h1{margin: 11vw 0 40px 0; font-size: calc(20px + 1.5vw);}
    main.start h1{margin: 30px 0 20px 0;}
    /* Typo Ende */
    
    /* Inhaltsseiten */
    main section article.erster{margin-top: 4vw;}
    main section article.erster figure{margin-left: 15px;width: 90px;}
    
    article.komp01{display: flex;align-items: flex-end;padding: 15px !important;margin-bottom: 20px;}
    article.komp01 figure{width: 100%;}
    article.komp01 div{margin: 0;padding: 0 0 10px 20px;width: 50%;}
    
    article.komp02{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp02 figure{width: 100%;}
    article.komp02 div{margin: 0;padding: 0 10px 10px 20px;width: 50%;}
    article span{display: block;}
    article span a:link,
    article span a:active,
    article span a:visited{
        display: flex;
        width: 240px;
        margin: 0 20px 10px 0;
        padding: 0 10px 2px 10px;
        font-size: calc(12px + 0.5vw);
    }
	footer nav figure img{
		margin: 10px 0 0 2vw;
		max-width: 70%;
	}
	footer .container{
		margin: 0 auto 20px auto !important;
	}
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md { max-width: 768px; }
	
    div.mobile-navbar{display: flex;}
    nav.pc{ display: none; }
    /* Typo */
    h1{margin: 10vw 0 40px 0; font-size: calc(20px + 1.5vw);}
    main.start h1{margin: 50px 0 20px 0;}
    /* Typo Ende */
    
    /* Inhaltsseiten */
    main section article.erster{margin-top: 4vw;}
    main section article.erster figure{margin-left: 25px;width: 90px;}
    
    article.komp01{display: flex;align-items: flex-end;padding: 15px !important;margin-bottom: 20px;}
    article.komp01 figure{width: 100%;}
    article.komp01 div{margin: 0;padding: 0 0 10px 20px;width: 50%;}
    
    article.komp02{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp02 figure{width: 100%;}
    article.komp02 div{margin: 0;padding: 0 10px 10px 20px;width: 50%;}
    article span{display: flex;}
    article span a:link,
    article span a:active,
    article span a:visited{
        display: flex;
        width: 260px;
        margin: 0 20px 0 0;
        padding: 0 10px 2px 10px;
        font-size: calc(12px + 0.5vw);
    }
	footer nav figure img{
		margin: 5px 0 0 2vw;
		max-width: 75%;
	}
	footer .container{
		margin: 0 auto 20px auto !important;
	}
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg { max-width: 992px; }
	
    div.mobile-navbar{display: none;}
    nav.pc{ display: block; }
    nav.pc ul li a:visited{font-size: calc(14px + 0.3vw); margin: 0; padding: 0;}
    nav.pc ul li.aktiv{font-size: calc(16px + 0.5vw); margin: 0; padding: 0;}
	nav.pc ul li.flagge{width: 40px; margin-top: -6px;}
    /*nav.start ul li:last-child{width: 40px; margin-top: -6px;}*/
    /* Typo */
    h1{margin: 9vw 0 40px 0; font-size: calc(26px + 1.5vw);}
    main.start h1{margin: 60px 0 20px 0;}
    /* Typo Ende */
    
    /* Inhaltsseiten */
    main section article.erster{margin-top: 5vw;}
    main section article.erster figure{margin-left: 30px;width: 100px;}
    
    article.komp01{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp01 figure{width: 100%;}
    article.komp01 div{margin: 0;padding: 0 0 10px 20px;width: 50%;}
    
    article.komp02{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp02 figure{width: 100%;}
    article.komp02 div{margin: 0;padding: 0 10px 10px 20px;width: 50%;}
    article span{display: flex;}
    article span a:link,
    article span a:active,
    article span a:visited{
        display: flex;
        width: 260px;
        margin: 0 20px 0 0;
        padding: 0 10px 2px 10px;
        font-size: calc(12px + 0.5vw);
    }
	footer nav figure img{
		margin: 5px 0 0 2vw;
		max-width: 75%;
	}
	footer .container{
		margin: 0 auto 20px auto !important;
	}
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1200px; }
	
    div.mobile-navbar{display: none;}
    nav.pc{ display: block; }
    nav.pc ul li a:visited{font-size: calc(16px + 0.5vw); margin: 0; padding: 0;}
    nav.pc ul li.aktiv{font-size: calc(16px + 0.5vw); margin: 0; padding: 0;}
	nav.pc ul li.flagge{width: 45px; margin-top: -6px;}
    /*nav.start ul li:last-child{width: 45px; margin-top: -6px;}*/
    /* Typo */
    h1{margin: 7vw 0 40px 0; font-size: calc(26px + 1.5vw);}
    main.start h1{margin: 50px 0 10px 0;}
    /* Typo Ende */
    
    /* Inhaltsseiten */
    main section article.erster{margin-top: 5vw;}
    main section article.erster figure{margin-left: 30px;width: 100px;}
    
    article.komp01{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp01 figure{width: 100%;}
    article.komp01 div{margin: 0;padding: 0 0 10px 20px;width: 50%;}
    
    article.komp02{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp02 figure{width: 100%;}
    article.komp02 div{margin: 0;padding: 0 10px 10px 20px;width: 100%;}
    article span{display: flex;}
    article span a:link,
    article span a:active,
    article span a:visited{
        display: flex;
        width: 260px;
        margin: 0 20px 0 0;
        padding: 0 10px 2px 10px;
        font-size: calc(12px + 0.5vw);
    }
	footer nav figure img{
		margin: 5px 0 0 2vw;
		max-width: 75%;
	}
	footer .container{
		margin: 0 auto 20px auto !important;
	}
}
@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1400px; }
	
    div.mobile-navbar{display: none;}
    nav.pc{ display: block;}
    
    nav.pc ul li a:link,
    nav.pc ul li a:active,
    nav.pc ul li a:visited{font-size: calc(16px + 0.5vw); margin: 0; padding: 0;}
    nav.pc ul li.aktiv{font-size: calc(16px + 0.5vw); margin: 0; padding: 0;}
	nav.pc ul li.flagge{width: 50px; margin-top: -6px;}
    /*nav.start ul li:last-child{width: 50px; margin-top: -6px;}*/
	
    /* Typo */
    h1{margin: 5vw 0 40px 0; font-size: calc(26px + 1.5vw);}
    main.start h1{margin: 80px 0 20px 20px;}
    /* Typo Ende */
    
    /* Inhaltsseiten */
    main section article.erster{margin-top: 5vw;}
    main section article.erster figure{margin-left: 30px;width: 100px;}
    
    article.komp01{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp01 figure{width: 100%;}
    article.komp01 div{margin: 0;padding: 0 0 10px 20px;width: 100%;}
    
    article.komp02{display: flex;align-items: flex-end;padding: 15px !important;}
    article.komp02 figure{width: 100%;}
    article.komp02 div{margin: 0;padding: 0 10px 10px 20px;width: 100%;}
    
    article span{display: flex;}
    article span a:link,
    article span a:active,
    article span a:visited{
        display: flex;
        width: 300px;
        margin: 0 20px 0 0;
        padding: 0 10px 2px 10px;
        font-size: calc(12px + 0.5vw);
    }
	footer nav figure img{
		margin: 5px 0 0 2vw;
		max-width: 75%;
	}
	footer .container{
		margin: 0 auto 20px auto !important;
	}
}


/* ********************************************************************************* Develop */
.rand{
	border: 1px solid rgba(241,18,18,1.00);
}
.raum{
	height: 40px;
}
/* *******************
 *	Wird verwendet:
 *	Preisliste
 * *******************/
.abstand{
	height: 1vw;
}
p.develop{
    position:   fixed;
    left:       0;
    bottom:     60px;
    font-size:  1rem;
    padding:    4px 6px 4px 6px;
    margin:     0 0 0 10px;
    color: rgb(255, 255, 255);
    border: 1px solid rgba(126, 124, 114, 0.99);
    background-color: rgba(126, 124, 114, 0.99);
}
/* ********************************************************************************* Develop ENDE*/