/*******************************************************
*  THM  20180722a
*  RSCH 20200321
*  layout R-2.css, https://typo3-beratung.com
*
* #FFFFFF - gr -- Linie, Text
* #AAA    - hgr -- Erstellt
* #888    - gr -- Fuss
* #FFA500 - or  -- Hintergrund aktiver Menuepunkt,  Mouseover-Text
* #002845 - dbl - Hintergrund
*
******************************************************/

body {font-size:12pt;margin:10px;background-color:#002845;color:#FFFFFF;font-family:"Century Gothic", Arial}
body {width:100%;margin:0}

#kopf,#mittelteil,#meta,#erstellt,#logo,#brotkrumen {max-width:1000px;margin:0 auto}

/* *** Kopf (Logo und Hauptmenue) ************************************** */
#logo img {border:0;max-width:100%}
#kopf {margin-top:16px}
#motto {margin-left:230px;margin-top:-22px;padding:0 20px 3px 20px;color:#FFA500;font-size:32pt;display:inline-block;font-weight:bold;background:rgba(255, 2555, 255, 0.4)}
#kopfabstand {border-bottom:1px solid #FFA500;margin-top:20px}
#brotkrumen {padding-top:20px;text-align:left}
#brotkrumen, #brotkrumen a {color:white}
#erstellt {margin-bottom:16px}
.strich {border:none;border-top:1px solid #FFF;width:100%}
/* .csc-frame-frame2,.csc-mailform {background-color:#4e89a4}
.csc-form-element.csc-form-element-header h2 {color:#000!important}
.csc-mailform li label {color:#111} */

/* Kontaktformular */
#kf-name,#kf-subject,#kf-email,#kf-message,#kf-telefon {width:66%}

#mittelteil {margin-top:20px;padding-top:0;vertical-align:top}

/* *** Links ************************************* */
#links {width:230px;float:left}
#aktion img {margin-top:35px;border:1px solid white;width:228px}
#menue ul {text-align:left;list-style:none;margin:5px 0 0}
#menue ul li {margin:0;padding:0;display:inline}
#menue li a {margin:0 0 5px;padding:5px;display:block;color:#AAA;text-decoration:none;font-size:13pt;text-align:right;text-transform:uppercase;background:rgba(255, 2555, 255, 0.05)}
#menue li.aktiv a {color:#FFA500;font-weight:bold}

/* 1. Untermenue-Ebene */
#menue li.aktiv ul {font-size:11pt;font-weight:normal;margin-right:10px}
#menue li.aktiv ul a {font-weight:normal;color:#EEE;font-size:11pt;text-transform:none}
#menue li.aktiv li.aktiv a {font-weight:bold;color:#FFA500}

/* 2. Untermenue-Ebene */
#menue li.aktiv li.aktiv ul a {font-weight:normal;color:white;font-size:10pt}
#menue li.aktiv li.aktiv li.aktiv a {font-weight:bold;color:#FFA500;border-color:#FFA500}
#menue ul ul li a {border-right:2px solid #888}

/* 3. Untermenue-Ebene */
#menue li.aktiv li.aktiv li.aktiv ul a {font-weight:normal;color:white;border-color:#888}
#menue li.aktiv li.aktiv li.aktiv li.aktiv a {font-weight:bold;color:#FFA500;border-color:#FFA500}
#menue li.aktiv a:hover, #menue li a:hover, #menue li.aktiv li.aktiv a:hover, #menue li.aktiv li.aktiv li.aktiv a:hover,
#menue li.aktiv li.aktiv li.aktiv li.aktiv a:hover {color:#002845;background:#FFA500;border-color:#FFA500}

/* *** Mitte ************************************ */
#mitte {float:left;max-width:720px;margin:0 0 10px 25px}
#mitte h1, #mitte h2, #mitte h3 {color:#FFA500}
#mitte h1 {font-size:20pt;margin:0}  
#mitte h2 {padding:0;font-size:16pt}
#mitte h2.csc-firstHeader { position: relative; top: -2px; }  
#mitte h3 {font-size: 14pt}  
#mitte p {margin-top:0}

#mitte a { color: #FFA500; }
#mitte a:hover {color:#FFA500}

#mitte .csc-textpic-clear, #mitte .tx_cfloat_first { border: 0; }
#mitte hr { margin-bottom: 30px; }

#mitte ul { list-style-type: circle}
#mitte table {width:auto}


/* *** Fussbereich ******************************* */

#meta9 {text-align:center;font-size:11pt;padding:10px;margin-top:25px;background:rgba(255, 2555, 255, 0.05)}
#meta9, #meta9 a {color:#FFFFFF}
#meta9 a {text-decoration:none}
#meta9 a.aktiv {font-weight:bold}
#meta9 a:hover {color:#FFA500}

#erstellt {font-size:10pt;text-align:center}
#erstellt, #erstellt a {color:#AAA;text-decoration:none}
#erstellt a:hover {color:#FFA500}


/* Rahmen */
.frame-frame3, .frame-frame4 {
 background:#002845;
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMjg0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDZiYTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background:-moz-linear-gradient(top, #002845 0%, #446ba6 100%);/* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#002845), color-stop(100%,#446ba6));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #002845 0%,#446ba6 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #002845 0%,#446ba6 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top, #002845 0%,#446ba6 100%);/* IE10+ */
background:linear-gradient(to bottom, #002845 0%,#446ba6 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#002845', endColorstr='#446ba6',GradientType=0 );/* IE6-8 */
}

input#gesperrt-3544-name.form-control, 
input#gesperrt-3544-subject.form-control, 
input#gesperrt-3544-email.form-control, 
textarea#gesperrt-3544-message.xxlarge.form-control {
 width:98%;
line-height:1.5;
}

/* Responsive Teil */
@media screen and (max-width:996px) {
#mitte {width:auto;float:left;margin-right:1em}
#brotkrumen {margin-left:1em;}
#links {margin-left:1em;padding-left:10px;padding-right10px;margin-bottom:2em}  
#logo img {margin-left:0;float:right}
#motto {font-size:28pt}
}
 
@media screen and (max-width:750px) {
#brotkrumen, #links, #mitte {margin-left:.5em; margin-right:.5em;}
#menue li a {margin: 0 0 8px}
#erstellt {font-size: 8pt}
#motto,#brotkrumen,#mitte,#erstellt,#meta9{padding:4px}
#brotkrumen img {margin-left:0}
#motto {font-size:24pt;margin-left: 0px}
input#gesperrt-3544-name.form-control, 
input#gesperrt-3544-subject.form-control, 
input#gesperrt-3544-email.form-control, 
textarea#gesperrt-3544-message.xxlarge.form-control  {width:96%;}
}

@media screen and (max-width:520px) {
#menue {padding-right:8px}
#mitte {width:94%}
#meta9,#erstellt {line-height:24px}
#zurueck {text-align:center}
#motto {font-size:16pt;display:block}
input#gesperrt-3544-name.form-control, 
input#gesperrt-3544-subject.form-control, 
input#gesperrt-3544-email.form-control, 
textarea#gesperrt-3544-message.xxlarge.form-control  {width:90%;}
}