@charset "UTF-8";
/**
 * CSS Media-Queries cdnet-internetservice
 *
 * @site         getriebespezialist.de
 * @version      0.2
 * @date         2022-07-12
 * @package      xhtml-css
 * @author       Roland Brückner
 * @copyright    2022 by the author
 * @valid        yes
 * @lastmodified 2022-10-31 22:00
 *
 *
       Alle Rechte reserviert             *
       Automatikgetriebe Ricardo Peter    *
*******************************************/

html * {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
		
}


body {
	font-family: 'Montserrat', sans-serif;
	font-size:16pix;
	font-size:100%;
	line-height:150%;
	color: #666;
	background-color: #fff;
	text-align:center;
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v49-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v49-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v49-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v49-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v49-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v49-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}

		
h1 {
	font-family: 'Oswald', sans-serif;
	color:#fff;
	font-size:255%;
	line-height:110%;
	font-weight:100;
	margin:4% 0;

}
h2 { font-family: 'Oswald', sans-serif;
	color:#fff;
	font-size:170%;
	line-height:110%;
	font-weight:100;
	margin:3% 0
}
h2.subline { 
	font-size:150%;
}



h3 { font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:130%;
	line-height:130%;
	font-weight:100;
	letter-spacing:0.2em;
}

.black {
	color:#000;
}
.small  { 
	font-size:70%;
	color:#ccc;
	line-height:120%
}
.datenschutz { 
	display:block;	
	padding:0%;
	padding-left:28%;
	width:95%;
	text-align:justfy;

}

a { text-decoration:none;}

#main {	
	max-width:90em;
	width:100%;	
	margin:0 auto;
	padding:0 2%
}

#main #head {
	height:17%;
}

#main #head #top{
	height:1.8em;
}
/* +++   Sekundär-Navi  oben +++ */		
#main #head #top ul.sek-navi {
	padding:0;
	width:100%;
}

#main #head #top  ul.sek-navi li {
	list-style-type:none;
	float:right;
	margin-left:3em
}
#main #head #top ul.sek-navi li a{
	font-size:80%;
	color: #666;
	padding:0.4em;
	padding-left:1.2em;
	background:transparent url(../img/sek-list-element.png) 0 -0.65em no-repeat;	
}

#main #head #top ul.sek-navi li a:hover,
#main #head #top ul.sek-navi li a.active {
	color: #f00;
	background-position: 0 0.72em;	
}

#main #head #logo {
	float:left;
	width:26%;
}
#main #head #logo img.logo {
	margin:16% 0 -30% 12%;
	width:100%;
	height:100%;
object-fit: contain;
object-position: 10%
}

		
/* +++   Hauptnavi  +++ */

#main #head ul.navi {
	float:right;
	margin-top:9%;
	width:32%;
	min-width:35em;
}


#main #head ul.navi li {
	list-style-type:none;
	line-height:130%;
	float:right;
}

#main #head ul.navi li a{
	font-size:100%;	
	margin:0 0.5em;
	color: #e00;
	padding:0.6em 1.5em;
	border:3px solid #f00;
	border-radius: 24px 24px 24px 24px;
}


#main #head ul.navi li a:hover,
#main #head ul.navi li a.active {
	color: #fff;
	background-color: #f00
}



/* ===== unterer Contentbereich ===  */

#main #content {
	font-size:120%;
	text-align:left;
	width:100%;
	padding:8%;
	min-height:33em;
	background-color: #f00;
	color:#fff;
	border-radius: 0 0 55px 55px;
}

#main #content a { 
	text-decoration:underline;
	color:#fa6
}
#main #content a.anfrage { 
	text-decoration:none;display:block;
	padding:1.5% 4%;
	margin:1em 0 5em 3em;
	color:#f00;
	border:2px solid #fff;
	border-radius: 25px 25px 25px 25px;
	color:#fff;
	width:55%;
	min-width:12em;
	background-color:red;text-align:center;
}
#main #content a.anfrage:hover { 
	background-color:#fff;
}

#main #content a:hover { 
	color:#000;
}
#main #content img.content-pic{
		width:33%;
		float:right;
		margin:0.6% 0 2% 2%;
	/* background-color: #fea */
}

/* ===  Liste im Content === */
#main #content ul {
		margin:1em 0 ;
}
#main #content ul li{
	margin:0.5em 0 0.5em 1em;
}


#main #content iframe.gkarte {
	width:100%;
	height:22em;
	border:3px solid #fff;
	border-radius: 12px 12px 12px 12px;

}


/*  +++ Zweispaltigkeit  +++ */

#main #content .colL,
#main #content .colR {
	float:left;	
	width:44%;
	min-width:11em;
	margin:2% 7% 3% 0;
	line-height:150%
}

#main #content .colR {
	margin:2% 0 3% 0;	
}

.atra {
	border: 3px solid #fff;
	border-radius: 33px 0 0 33px;
	padding:4% 6%;
	font-size:80%;
	line-height:130%
}
.atra img {
	float:right;
	margin: 0 -2% 2% 4%;
	width:25%;
	height:auto
}

/*_______ Formatierung fur Werbelayer Startseite _________*/

.werbelayer-0 {
	position:absolute;
	display:block;
	z-index:90;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: transparent url(../img/kachel-ws.png) 0 0 repeat;
}


.werbelayer-0 .loop {
	width:55%;
	max-width:46em;
	background-color:#bbb;
	margin:5% 20%;
	padding:2% 5%;
	box-sizing: border-box;
	border-radius: 40px 40px 40px 40px;
	border: 5px solid #bbb;
	color: #000; text-align:left
}
.werbelayer-0 .loop a.displaydown{
	float:right;
	position:relative;
	top:-22%;right:-22%;z-index:1;
	background-color:transparent;margin:0;
}
.werbelayer-0 .loop img{
	width:46%;
	background-color:transparent;
}

.werbelayer-0 .loop h2{
	font-family:'Oswald', sans-serif; text-rendering: optimizeLegibility;
	margin:0;
	font-size:280%;color:#000;
}
.werbelayer-0 .loop h3{
	font-size:140%; 
}

.werbelayer-0 .loop .big{
	font-size:280%;
	background-color:transparent;
}



/* ======= Show-element unten ======= */
#main #lumi-pic{
	margin-left: 5%;
}

#main #lumi-pic img.pic{
	width:12%;
	float:left;
	margin:-5% 2% 5% 2%;
	border:12px solid #f00;
	border-radius: 26px 26px 26px 26px;
}


#main #lumi-pic .laypic {
	background-color:#fea;
}


/* ======= mobile Navi unten ======= */
#main #footer {
	display:none;
	text-align:center;
	padding:2% 3% 6% 3%;
	color:#aaa;
}
#main #footer a {
	font-size:100%;
	color:#aaa;
	padding:3% 1%
}
#main #footer a:hover,
#main #footer a.active {
	color:#000
}


/* ============================= */
.clear  {
	clear:both;
	font-size:0;
	padding: 0;
	margin: 0;
	border: 0;
}

/* = = = Formulardaten = = = */
#main #content fieldset {
		margin:0;
}

#main #content fieldset p {
	padding:0.5em;width:100%;
	margin-bottom:0.3em;
}

#main #content fieldset p label {
	width:20%;
	min-width:9em;
	float: left;
	font-size:88%;
}

#main #content fieldset p input,
#main #content fieldset p textarea {
	width: 65%;
	min-width:17em;
	font-size:100%;
	height:auto;
	padding:0.2em ;
	background-color:#ffecd8;
	color: #666;
	border: 3px solid #333;
	border-radius: 9px 9px 9px 9px;
}
#main #content fieldset p input:hover,
#main #content fieldset p textarea:hover,
#main #content fieldset p textarea:focus,
#main #content p input:focus {
	background-color:#fff;
	border: 3px solid #fff;
	border-radius: 9px 9px 9px 9px;
}

#main #content fieldset p input.dsgvo { 
    width:1.5em;
    background-color:transparent;
	margin:0;
	height:2em;
	min-width:1.5em;	
}
#main #content fieldset input.hony {
	background-color:transparent;
	
}

#main #content fieldset p textarea {
	height:8em;width: 66%;
}


#main #content fieldset p input.send {
	cursor:pointer;
	width:8em;
	font-size:100%;
	height:auto;
	padding:0.5em 3em;
	color:#000;
	background-color:#fff;
	font-weight:700;
	border:none;
}

#main #content fieldset input.send:hover {
	background-color:#000;color:#fff;
	border:none;