/* Schriften */
@font-face {
    font-family: 'PT Serif';
    font-weight: 400;
    font-style: normal;
    src: local('PT Serif'), url('//cdn.website-start.de/s/fonts/PT_Serif/PT_Serif-Web-Regular.woff') format('woff');
}
@font-face {
    font-family: 'PT Serif';
    font-weight: 700;
    font-style: normal;
    src: local('PT Serif Bold'), url('//cdn.website-start.de/s/fonts/PT_Serif/PT_Serif-Web-Bold.woff') format('woff');
}
@font-face {
    font-family: 'PT Serif';
    font-weight: 400;
    font-style: italic;
    src: local('PT Serif Italic'), url('//cdn.website-start.de/s/fonts/PT_Serif/PT_Serif-Web-Italic.woff') format('woff');
}

/* Reset */
html, body { height: 100%; margin: 0; background-color: #ffffff; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
img, a img { border: 0; }
img { display: block; }
ul, ol { margin-top: 0.5em; margin-bottom: 0.5em; }
.hidden { display: none !important; }

/* Grundgerüst */
.diyw .diywebContainer { position: relative; margin: 0 auto; }
.diyw .diywebLiveArea  { position: relative; margin: 0 auto; padding: 20px; width: 960px; }
.diyw .diywebLiveArea::before, .diyw .diywebNav ul::before { content: " "; display: table; }
.diyw .diywebLiveArea::after,  .diyw .diywebNav ul::after  { content: " "; display: table; clear: both; }

@media only screen and (max-width: 1023px) { .diyw .diywebLiveArea { width: 720px; } }
@media only screen and (max-width:  767px) { .diyw .diywebLiveArea { width: 530px; } }
@media only screen and (max-width:  568px) { .diyw .diywebLiveArea { width: 420px; padding: 10px; } }
@media only screen and (max-width:  480px) { .diyw .diywebLiveArea { width: auto; } }

/* Emotion-Header */
.diyw .diywebEmotionHeader { overflow: hidden; padding: 0; }
.diyw .diywebEmotionHeader .diywebLiveArea,
.diyw .diywebContent .diywebLiveArea { padding: 0; }
.diyw #emotion-header,
.diyw .diywebContent .diywebLiveArea { border-radius: 2px; }

div#emotion-header         { position: relative; background-repeat: no-repeat; line-height: 0; overflow: hidden; }
img#emotion-header-img     { width: 100%; }
img#emotion-header-logo    { position: absolute; z-index: 4; }
#emotion-header-title-svg  { display: block; position: absolute; visibility: hidden; width: 100%; height: 100%; left: 0; top: 0; z-index: 5; overflow: visible; }
div#emotion-no-bg-container { display: inline-block; position: relative; width: 100%; }

/* Inhaltslayout */
.diyw .diywebGutter            { padding: 10px 20px; }
.diyw .diywebMain .diywebGutter { padding: 20px 40px; }
.diyw .diywebMain              { float: left; width: 52%; }
.diyw .diywebLiveArea > .diywebNav { float: left; width: 24%; }
.diyw .diywebFooter            { min-height: 20px; }

@media only screen and (min-width: 768px) {
    body.diyfeNoSidebar .diyw .diywebMain { width: 76% !important; float: right !important; }
}
@media only screen and (min-width: 767px) and (max-width: 1023px) {
    .diyw .diywebMain              { float: left; width: 70%; }
    .diyw .diywebLiveArea > .diywebNav { float: left; width: 24%; }
    .diyw .diywebMain .diywebNav   { display: block; }
}
@media only screen and (max-width: 767px) {
    .diyw .diywebMain,
    .diyw .diywebLiveArea > .diywebNav { width: auto; float: none; }
}
@media only screen and (max-width: 568px) {
    .diyw .diywebMain .diywebGutter    { padding: 20px 10px; }
    .diyw .diywebContent .diywebNav    { display: none; }
}

/* Navigation */
.diyw .diywebNav ul                      { list-style-type: none; margin: 0; padding: 0; }
.diyw .diywebNav a                       { text-decoration: none; display: block; padding: 0.4em 1em 0.35em; }
.diyw .diywebNav a:hover                 { text-decoration: underline; }
.diyw .diywebContent .diywebNav li       { margin: 0; }
.diyw .diywebContent .diywebNav li a     { padding: 8px 0; margin: -1px 0 0 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.diyw .diywebContent .diywebNav li:last-child a { border: none; }

/* Seiteninhalt — Modulcontainer */
.diyw div.n { padding: 5px; margin: 1em 0; }

/* Footer-Layout */
div#contentfooter              { width: 100%; padding: 0; margin: 0; font-size: 11px; line-height: 140%; overflow: hidden; }
div#contentfooter div.leftrow  { float: left;  text-align: left;  width: 55%; }
div#contentfooter div.rightrow { float: right; text-align: right; width: 42%; }

.diyw button.switchViewWeb,
.diyw button.switchViewMobile { display: none; }
@media screen and (max-device-width: 1024px) {
    .diyw button.switchViewWeb { display: inline !important; }
}

/* Typografie — Basisbereich (weiß) */
.diyw .diyweb {
    background-color: #ffffff;
    color: #474747;
    font-family: 'PT Serif', serif;
    font-size: 18.2px;
    line-height: 1.4;
    -webkit-text-size-adjust: none;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    white-space: normal;
}
.diyw .diyweb h1 {
    color: #474747;
    font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif;
    font-size: 32px;
    font-weight: bold;
    margin: 0.67em 0;
}
.diyw .diyweb h2 {
    color: #474747;
    font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif;
    font-size: 24px;
    font-weight: bold;
}
.diyw .diyweb p                { color: #474747; margin: 0; }
.diyw .diyweb a                { color: #474747; text-decoration: underline; }
.diyw .diyweb a:hover          { text-decoration: none; }
.diyw .diyweb .mainNav1 a {
    color: #474747;
    font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
}

/* Typografie — diyfeCA1 (Navigations-/Inhaltsbereich, hellblau) */
.diyw .diyfeCA1 {
    background-color: #aacce2;
    color: #264153;
    font-family: 'PT Serif', serif;
    font-size: 19.5px;
}
.diyw .diyfeCA1 h1 { color: #717d97; font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif; font-size: 28px; font-weight: bold; }
.diyw .diyfeCA1 h2 { color: #111417; font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif; font-size: 24px; font-weight: bold; }
.diyw .diyfeCA1 p  { color: #264153; font-family: 'PT Serif', serif; font-size: 19.5px; }
.diyw .diyfeCA1 a  { color: #717d97; font-style: italic; }
.diyw .diyfeCA1 .mainNav1 a { color: #111417; font-family: Georgia, serif; font-size: 16px; font-style: normal; }

/* Typografie — diyfeCA2 (Emotion-Header, dunkelblau) */
.diyw .diyfeCA2 {
    background-color: #4d71b3;
    color: #edf1f7;
    font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif;
    font-size: 14px;
}
.diyw .diyfeCA2 h1 { color: #edf1f7; font-size: 32px; font-weight: bold; }
.diyw .diyfeCA2 h2 { color: #edf1f7; font-size: 24px; font-weight: bold; }
.diyw .diyfeCA2 p  { color: #edf1f7; font-size: 14px; }
.diyw .diyfeCA2 a  { color: #edf1f7; }
.diyw .diyfeCA2 .mainNav1 a { color: #edf1f7; font-size: 14px; font-style: normal; }

/* Footer-Typografie */
body.startpage .diyw .diywebFooter .webnavigation a,
body.startpage .diyw .diywebFooter .diywebNav a {
    color: #474747 !important;
    font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif !important;
    font-size: 14px !important;
}