@charset "utf-8";

#headerMobileNav { height:0; max-height:0; }

/* ------- Farbcodes -------- *//*
grau: #4f4f4f

/* --- Externe Schriften - Google Webfonts Helper --- */
/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'),
       url('fonts/lato-v16-latin-300.woff2') format('woff2'),
       url('fonts/lato-v16-latin-300.woff') format('woff'),
       url('fonts/lato-v16-latin-300.ttf') format('truetype');
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('fonts/lato-v16-latin-regular.woff2') format('woff2'),
       url('fonts/lato-v16-latin-regular.woff') format('woff'),
       url('fonts/lato-v16-latin-regular.ttf') format('truetype');
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'),
       url('fonts/lato-v16-latin-700.woff2') format('woff2'),
       url('fonts/lato-v16-latin-700.woff') format('woff'),
       url('fonts/lato-v16-latin-700.ttf') format('truetype');
}

/* --- alle Abstaende und Raender auschalten --- */
* { margin:0px; padding:0px; border:0px none; }

/* --- bei Links die Hervorhebung durch den Browser auschalten --- *//*
a:active, a:focus { outline-width:0; outline-style:none; outline-color:currentcolor; }

/* --- wichtige Styles, um Fehler in der default-style von TYPO3 zu verhindern --- */
div.csc-textpic { position:relative; top:0px; overflow:hidden; }
div.csc-textpic .csc-textpic-imagewrap img { border:none; display:block; }
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image { margin:0; padding:0; border:none; }

/* --- Die oft verwendeten Styles position:relative, position:absolute und overflow:hidden in Klasse packen --- */
.rehi { position:relative; overflow:hidden; }
.abhi { position:absolute; overflow:hidden; }
.revi { position:relative; overflow:visible; }
.abvi { position:absolute; overflow:visible; }

/* --- Die oft verwendeten Styles für background-colour, display:none und clear:both in Klasse packen --- */
.hide  { display:none; }
.clear { clear:both; }

/* ======================================================================================================================================= */
/* ===========================================       Gemeinsame Styles für alle Viewports      =========================================== */
/* ======================================================================================================================================= */

/* ------------------------------------------------- Schalter für Elemente, die ohne JavScript verborgen werden ---------- */
body.fb .hideJSfalse { display:none; }

/* ------------------------------------------------- Grundschriftformatierung -------------------------------------------- */
html {  font-family: 'Lato', Arial, Helvetica, sans-serif; font-size:16px; font-weight:400; font-style:normal; line-height:24px; color:#5e5e5e; -webkit-text-size-adjust:100%; }

/* ------------------------------------------------- Styles fuer Positionierung der Grundbloecke ------------------------- */
html { width:100%; height:100%; z-index:0; background-color:#fff; }
body { width:100%; height:100%; z-index:0; background-color:#fff; } /* für abschneiden: keine höhenangabe und z-index auf 1 */

#site     { display:flex; flex-direction: column; width:100%; height:100vh; background-color:transparent; z-index:1; } 

#rotateScreen       { left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index:9; display:none; }
#rotateMessagePhone { top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);
				      width:auto; height:auto; padding:30px 30px 30px; border:3px solid #000; background-color:#fff; display:none;
                      font-family: 'Lato', Arial, Helvetica, sans-serif; font-size:14px; font-weight:400; font-style:normal; line-height:20px; color:#000; }

#rotateScreen.phone                     { display:block; }
#rotateScreen.phone #rotateMessagePhone { display:block; }

#frameHeader          { width:100%; height:auto; width:100%; padding:0; }
#header               { width:100%; height:auto; }
#headerLogo           { width:100%; height:auto; float:left; box-sizing:border-box; max-width:545px; padding-right:65px; }

#headerLogo a         { display:block; position:relative; width:100%; height:auto; margin:0; padding:0; overflow:hidden; }
#headerLogo a img     { width:100%; height:auto; }
#headerIcon           { right:20px; top:20px; width:40px; height:33px; cursor:pointer; z-index:4; }
#headerIcon .lineUp   { left:0; top:4px; width:40px; height:8px; border-bottom:3px solid #4f4f4f; border-top:3px solid #4f4f4f; -webkit-transition: all 0.2s ease-out;
                        -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
#headerIcon .lineDown { left:0; top:26px; width:40px; height:0px; border-top:3px solid #4f4f4f; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; 
                        -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

#headerIcon.up .lineUp   { left:0px; top:16px; width:40px; height:0px; border-top:3px solid #4f4f4f; border-bottom:0 none; transform:rotate(-45deg); }
#headerIcon.up .lineDown { left:0px; top:16px; width:40px; height:0px; border-top:3px solid #4f4f4f; transform:rotate(45deg); }
 
#framePage { width:100%; flex-grow:1; }
#page      { width:100%; height:100%; }

#backPicDesk   { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:0; background-color:#fff; }
#backPicMobile { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:0; background-color:#fff; }

#frameNavTop { float:left; width:22%; height:100%; box-sizing:border-box; padding:116px 0 46px; }
#navTop      { width:100%; height:auto; box-sizing:border-box; padding:8px 9.0909% 10px 0;}

#site.homepage #navTop { background-color:rgba(255,255,255,0.75); }

#frameContent       { float:right; width:78%; height:100%; box-sizing:border-box; padding:100px 100px 100px 0; z-index:1; }
#contentTransparent { width:100%; height:100%; box-sizing:border-box; padding:30px 0 30px; background-color:rgba(255,255,255,0.5); }
#contentCrop        { width:100%; height:100%; box-sizing:border-box; padding:0 60px 0 40px; overflow:auto; overflow-x:none; overflow-y:auto; }
#content            { float:left; width:100%; max-width:800px; height:auto; }

#frameNavBottom { left:0; bottom:0; width:100%; height:auto; z-index:2; }
#navBottom      { padding:10px 0 30px; width:auto; max-width:310px; height:auto; margin:0 auto 0; text-align:center; overflow:hidden; z-index:2; }

#frameClaim { right:0px; bottom:150px; width:50%; height:auto; padding:15px 0 15px 18px; background-color:rgba(255,255,255,0.75); z-index:3; }
#claim      { float:left; width:90%; text-align:left;
              font-size:34px; font-weight:400; letter-spacing:1px; font-style:normal; line-height:40px; color:#595959; }
#claim a    { text-decoration:none; color:#595959; }
 
 
/* ------------------------------------------------- Styles fuer Smartphone Menu ----------------------------------------------- */
#headerMobileNav      { width:100%; height:auto; max-height:0px; margin:0; box-sizing:border-box; padding:0 20px 0; }

#headerMobileNav ul          { position:relative; width:100%; overflow:hidden; }
#headerMobileNav ul li       { position:relative; width:100%; margin:0; padding:0; list-style:none; border-top:1px solid #555555;
                               text-align:center; font-size:22px; line-height:50px; }
#headerMobileNav ul ul       { position:relative; width:100%; box-sizing:border-box; padding:0 20px 0; overflow:hidden; }
#headerMobileNav ul ul li    { position:relative; width:100%; margin:0; padding:0; list-style:none; border-top:1px solid #555555;
                               text-align:center; font-size:16px; line-height:36px; }
#headerMobileNav ul li a     { text-decoration:none; font-weight:200; color:#4f4f4f; }

#headerMobileNav ul.mobileul { border-bottom:1px solid #555555; margin:0 0 10px; }

#headerMobileNav        { height:auto; max-height:0px; -webkit-transition: max-height 0.5s ease-out;
                          -moz-transition: max-height 0.5s ease-out;
                          -ms-transition: max-height 0.5s ease-out;
                          -o-transition: max-height 0.5s ease-out;
                          transition: max-height 0.5s ease-out; }
#headerMobileNav.active { height:auto; max-height:500px; -webkit-transition: max-height 1.0s ease-in-out;
                          -moz-transition: max-height 1.0s ease-in-out;
                          -ms-transition: max-height 1.0s ease-in-out;
                          -o-transition: max-height 1.0s ease-in-out;
                          transition: max-height 1.0s ease-in-out; }
 
 
/* ------------------------------------------------- Styles fuer Menu oben und Menu unten ------------------------------------------------ */
#navTop ul          { position:relative; width:100%; overflow:hidden; }
#navTop ul li       { position:relative; width:100%; margin:0; list-style:none;
                      text-align:right; font-size:22px; font-weight:400; font-style:normal; line-height:26px; }
#navTop ul li a     { display:block; padding:5px 0 0; text-decoration:none; color:#444444; overflow:hidden; }
#navTop ul li.no a  { border-bottom:5px solid transparent; }
#navTop ul li.act a { border-bottom:5px solid transparent; }
#navTop ul li.cur a { border-bottom:5px solid #ffffff; }

#navTop ul ul          { position:relative; width:100%; padding:8px 0 8px; overflow:hidden; }
#navTop ul ul li       { position:relative; width:100%; margin:0; list-style:none;
                         text-align:right; font-size:18px; font-weight:400; font-style:normal; line-height:22px; }
#navTop ul ul li.no    { border-bottom:3px solid transparent;  }
#navTop ul ul li.cur   { border-bottom:3px solid #ffffff;  }
#navTop ul ul li a     { display:block; padding:3px 0 0; text-decoration:none; border-bottom:0 none; color:#444444; overflow:hidden; }
#navTop ul ul li.no a,
#navTop ul ul li.act a,
#navTop ul ul li.cur a { border-bottom:0 none; }

#navTop ul ul li a:hover { color:#ffffff; }

#navBottom ul        { display:block; position:relative; width:auto; overflow:hidden; text-align:center; vertical-align:text-top; }
#navBottom ul li     { display:inline-block; list-style:none;
                       font-size:20px; font-weight:400; font-style:normal; line-height:26px; color:#fff; }
#navBottom ul li a   { color:#fff; /*text-shadow:-2px -2px 3px #000, 2px 2px 3px #000;*/ }
#navBottom ul li.no  { border-bottom:5px solid transparent; }
#navBottom ul li.cur { border-bottom:5px solid #ffffff; }
#navBottom ul li.cev { padding:0 20px 0; }

#navBottom.white ul li,
#navBottom.white ul li a     { color:#fff; }
#navBottom.lightgrey ul li,
#navBottom.lightgrey ul li a { color:#bbb; }
#navBottom.grey ul li,
#navBottom.grey ul li a      { color:#888; }
#navBottom.darkgrey ul li,
#navBottom.darkgrey ul li a  { color:#444; }
#navBottom.black ul li,
#navBottom.black ul li a     { color:#000; }

#navBottom ul li a,
#navBottom ul li.cev span { display:block; padding:5px 0 0; text-decoration:none; overflow:hidden; }


/* ------------------------------------------------- Styles fuer 100% Bilder im Text ------------------------------------------------ */
.text .frame-default,
.text .frame-portrait,
.text .ce-textpic,
.text .ce-image,
.text .ce-outer,
.text .ce-inner,
.text .ce-row,
.text .ce-column,
.text .ce-media,
.text figure,
.text .ce-media img,
.text figure img  { position:relative; overflow:hidden; margin:0; padding:0; border:0px none; border-image-width:0; width:100%; height:auto; }

.text .ce-textpic .ce-gallery,
.text .ce-image .ce-gallery    { box-sizing:border-box; padding: 6px 20px 6px; }

/*frame-default*/
.text .frame-default .ce-textpic .ce-gallery    { width:100%; max-width:500px; }
.text .frame-default .ce-textpic .ce-bodytext   { width:100%; }

.text .frame-default .ce-textpic.ce-left .ce-gallery    { float:left; }
.text .frame-default .ce-textpic.ce-left .ce-bodytext   { float:left; }
.text .frame-default .ce-textpic.ce-center .ce-gallery  { float:left; }
.text .frame-default .ce-textpic.ce-center .ce-bodytext { float:left; }
.text .frame-default .ce-textpic.ce-right .ce-gallery   { float:right; }
.text .frame-default .ce-textpic.ce-right .ce-bodytext  { float:right; }

.text .frame-default .ce-image.ce-left .ce-gallery   { float:left; }
.text .frame-default .ce-image.ce-center .ce-gallery { float:left; }
.text .frame-default .ce-image.ce-right .ce-gallery  { float:right; }

/*fra,me-portrait*/
.text .frame-portrait .ce-textpic.ce-left .ce-gallery    { float:left; width:50%; }
.text .frame-portrait .ce-textpic.ce-left .ce-bodytext   { float:left; width:50%; }
.text .frame-portrait .ce-textpic.ce-center .ce-gallery  { float:left; width:50%; }
.text .frame-portrait .ce-textpic.ce-center .ce-bodytext { float:left; width:50%; }
.text .frame-portrait .ce-textpic.ce-right .ce-gallery   { float:right; width:50%; }
.text .frame-portrait .ce-textpic.ce-right .ce-bodytext  { float:right; width:50%; }

/* --- Abstände --- */
.frame.frame-space-before-nospace     { padding-top:0; }
.frame.frame-space-before-extra-small { padding-top:9px; }
.frame.frame-space-before-small       { padding-top:18px; }
.frame.frame-space-before-medium      { padding-top:27px; }
.frame.frame-space-before-large       { padding-top:36px; }
.frame.frame-space-before-extra-large { padding-top:45px; }

.frame.frame-space-after-nospace     { padding-bottom:0; }
.frame.frame-space-after-extra-small { padding-bottom:9px; }
.frame.frame-space-after-small       { padding-bottom:18px; }
.frame.frame-space-after-medium      { padding-bottom:27px; }
.frame.frame-space-after-large       { padding-bottom:36px; }
.frame.frame-space-after-extra-large { padding-bottom:45px; }

  
/* ---------------------------------------------------------- Styles fuer die Schriften -------------------------------------------------------------- */
.text p.indented { margin:0; }

.text p  { padding:0 0 12px 20px; }
.text h1 { padding:0 0 18px;  font-size:40px; line-height:48px; font-weight:700; color:#555555; }
.text h2 { padding:18px 0 10px; font-size:20px; line-height:26px; font-weight:700; color:#555555; }
.text h3 { padding:0 0 10px; font-size:18px; line-height:24px; font-weight:700; color:#555555; padding-left:20px; }

.text p strong { font-weight:700; }

.text a,
.text p a  { text-decoration:underline; color:#555555; }
.text h1 a { text-decoration:none;      color:#555555; }
.text h2 a { text-decoration:none;      color:#555555; }

.text a:hover,
.text p a:hover  { text-decoration:none; }

.text ul    { margin:0; padding:6px 0 0 50px; color:#ffffff; }
.text ul li { list-style:none; margin:0 0 6px; color:#555555; }

.text ul li::before { content:"\2022"; color:#ffffff; font-weight:bold; display:inline-block; width:1em; margin-left:-1em; }

.text-left   { text-align:left; } 
.text-center { text-align:center; } 
.text-right  { text-align:right; }


/* ======================================================================================================================================= */
/* ========================================      Viewport kleiner 700 Pixel - Smartphone klein     ======================================= */
/* ======================================================================================================================================= */

@media screen and (max-width:699px) {

#backPicDesk   { display:none; }
#backPicMobile { display:block; }

#site.homepage #headerMobileNav { display:none; }
#site.homepage #headerIcon      { display:none; }

#site.textpage                  { display:block; height:auto; }
#site.textpage #frameNavTop     { display:none; }
#site.textpage #frameNavBottom  { display:none; }

#navBottom { padding:10px 10px 10px; }

#site.homepage #frameNavTop     { width:50%; max-width:140px; padding:55px 0 46px; }
#site.homepage #navTop ul li    { font-size:20px; line-height:24px; }
#site.homepage #navBottom ul li { font-size:16px; line-height:24px; }

#site.textpage #frameContent       { float:none; width:100%; height:auto; margin:0; padding:0; }
#site.textpage #contentTransparent { width:100%; height:auto; padding:10px; }
#site.textpage #contentCrop        { width:100%; height:auto; margin:0; padding:0; overflow:none; overflow-x:none; overflow-y:none; }
 
#frameClaim { right:0; bottom:80px; width:100%; padding:10px 0 10px; }
#claim      { width:100%; text-align:center; font-size:22px; line-height:28px; }

/*fra,me-portrait*/
.text .frame-portrait .ce-textpic.ce-left .ce-gallery    { float:left; width:100%; max-width:250px; }
.text .frame-portrait .ce-textpic.ce-left .ce-bodytext   { float:left; width:100%; }
.text .frame-portrait .ce-textpic.ce-center .ce-gallery  { float:left; width:100%; max-width:250px; }
.text .frame-portrait .ce-textpic.ce-center .ce-bodytext { float:left; width:100%; }
.text .frame-portrait .ce-textpic.ce-right .ce-gallery   { float:right; width:100%; max-width:250px; }
.text .frame-portrait .ce-textpic.ce-right .ce-bodytext  { float:right; width:100%; }

}


/* ======================================================================================================================================= */
/* ========================================       Viewport größer 700 Pixel - Tablet Portrait      ======================================= */
/* ======================================================================================================================================= */

@media screen and (min-width:700px) and (max-width:1003px) {

#backPicDesk   { display:none; }
#backPicMobile { display:block; }

#headerPhone      { display:none; }
#headerIcon       { display:none; }
#headerMobileNav  { display:none; }

#frameNavTop { padding:48px 0 46px; }

#frameContent       { padding:40px 40px 60px 0; }
#contentTransparent { padding:20px 0 20px; }
#contentCrop        { padding:0 50px 0 30px; }

#navBottom { padding:10px 10px 10px; }
  
#frameClaim { bottom:100px; width:60%; padding:10px 0 10px 13px; }
#claim      { width:100%; font-size:22px; line-height:28px; }

}


/* ======================================================================================================================================= */
/* =======================================       Viewport größer 1014 Pixel - Tablet Landscape       ===================================== */
/* ======================================================================================================================================= */

@media screen and (min-width:1004px) and (max-width:1260px) {
 
#backPicDesk   { display:block; }
#backPicMobile { display:none; }

#headerPhone      { display:none; }
#headerIcon       { display:none; }
#headerMobileNav  { display:none; }

#frameNavTop { padding:66px 0 46px; }

#frameContent       { padding:60px 60px 80px 0; }
#contentTransparent { padding:20px 0 20px; }
#contentCrop        { padding:0 50px 0 30px; }

#navBottom { padding:10px 10px 20px; }

#frameClaim { bottom:100px; width:55%; padding:10px 0 10px 13px; }
#claim      { width:100%; font-size:28px; line-height:34px; }

}

/* ======================================================================================================================================= */
/* ==========================================       Viewport größer 1260 Pixel - Desktop       =========================================== */
/* ======================================================================================================================================= */

@media screen and (min-width:1261px) {
 
#backPicDesk   { display:block; }
#backPicMobile { display:none; }

#headerPhone     { display:none; }
#headerIcon      { display:none; }
#headerMobileNav { display:none; }
 
}