﻿html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {
    line-height:1;
    font-family: Arial, sans-serif;
    background-color: #F5F5DC; /* Cremeweiß als Haupt-Hintergrund */
}
h1 {
    font-size: 25px;
    color: #D4AF37; /* Gold für Eleganz */
}
h2 {
    font-size: 21px;
    color: #008B8B; /* Türkis für Frische  40E0D0*/
 
}
h3 {
    font-size: 18px;
    color: #CD6600; /* Sandbeige für neutrale Akzente C2B280*/
}
h4 {
    font-size: 16px;
    color: #FF6F61; /* Korallenrot für Call-to-Actions */
}



/* Standardstil für Desktop */
.image_full { border-radius: 18px;
    display: block;
    margin: 0;
    padding-left: 8px;
    float: right; /* Für Desktop-Ansichten */
    max-width: 380px; /* Maximale Breite des Bildes */
    width: 100%; /* Sicherstellen, dass das Bild skalierbar ist */
    height: auto; /* Beibehalten des Seitenverhältnisses */
}

.image_mobile {
    display: none; /* Wird nur auf mobilen Geräten angezeigt */
}

/* Responsive Design für mobile Geräte */
@media (max-width: 768px) {
    .image_full {
        display: none; /* Wird nur auf mobilen Geräten angezeigt */
    }

    .image_mobile {border-radius: 18px;

        display: block; /* Mobile Bilder anzeigen */
        margin: 0 auto; /* Zentrieren des Bildes */
         float: right;
        max-width: 280px; /* Maximale Breite des Bildes */
        width: 100%; /* Bild skalierbar machen */
        height: auto; /* Beibehalten des Seitenverhältnisses */
    }
}

/* Standardstil kleines bild für Desktop -*/
.image_full_k {
    display: block;
    margin: 0;
    padding-left: 8px;
    float: right; /* Für Desktop-Ansichten */
    max-width: 200px; /* Maximale Breite des Bildes */
    width: 100%; /* Sicherstellen, dass das Bild skalierbar ist */
    height: auto; /* Beibehalten des Seitenverhältnisses */
}

.image_mobile_k {
    display: none; /* Wird nur auf mobilen Geräten angezeigt */
}

/* Responsive Design  kleines bild für mobile Geräte */
@media (max-width: 768px) {
    .image_full_k {
        display: none; /* Wird nur auf mobilen Geräten angezeigt */
    }

    .image_mobile_k {
        display: block; /* Mobile Bilder anzeigen */
        margin: 0 auto; /* Zentrieren des Bildes */
         float: right;
        max-width: 150px; /* Maximale Breite des Bildes */
        width: 100%; /* Bild skalierbar machen */
        height: auto; /* Beibehalten des Seitenverhältnisses */
    }
}



article ol {  display: block; 
  list-style-type: disc; 
  padding-left: 25px; 
  margin: 1em 0; 
}

article li { 	margin-bottom: 10px; list-style: disc; list-style-position: outside; margin-left: 8px;line-height:20px;
}



@media (max-width: 540px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
   margin: 0px 0px 15px 0px;
   float:none;
   display: block;
   margin-left: auto;
   margin-right: auto;
  }
}
article {
    border-bottom: 2px dotted #C2B280; /* Dezente Abtrennung */
    padding-bottom: 20px;
    margin-bottom: 20px;
}
article h3 {
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 0px;
}
article p {
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 12px;
    color: #002147; /* Dunkelblau für bessere Lesbarkeit */
}
article ul {  display: block; 
  list-style-position: inside; 
padding-left: 25px; 
  margin: .5em 0; 
}

article ol {  display: block; 
  list-style-type: disc; 
  padding-left: 25px; 
  margin: 1em 0; 
}


article li { 	margin-bottom: 8px; 
}




#rand {border: 2px solid #dcbfff; padding: 1em; border-radius: 12px; background: #fdf9ff}


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
body,html{background-color:#f8f8f8}
header{background:#002147;padding:10px 30px;margin:auto;position:fixed;left:0;right:0;top:0;z-index:999;height:40px}
nav{display:inline-block}
nav ul li a{background:#D4AF37;padding:2px 6px;font-size:14px;text-decoration:none;font-weight:bold;color:#002147;border-radius:5px}
nav ul li a:hover{color:#fff}
nav ul li{display:inline-block;margin:10px}
nav ul{list-style:none}
article{border-bottom:2px dotted #998;padding-bottom:20px;margin-bottom:20px}
article h2{font-weight:normal;margin-bottom:20px} 
article h4{font-weight: normal;margin-bottom: 5px;margin-top: 0px;color:#red;}
abc a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}

footer{background:#002147;max-width:1000px;margin:0 -20px;clear:both;text-align:right}
footer p{padding:20px;color:#FFF}
address{padding:10px 20px 30px 10px}

aside > div{margin:10px auto;background:#D4AF37;min-height:10px;padding:8px 0px;text-align:left;color:#FFF}
a#logo{vertical-align:middle;font-size:30px;color:#D4AF37;font-weight:bold;display:block;text-decoration:none;text-align:left;line-height:40px;padding:15px 5px}
body > section{max-width:1000px;margin:auto;padding:30px 0px;border-bottom:1px solid #999;color:#333}
#sidebarBackTop{background:#0056b3;color:#FFF;opacity:0.8;cursor:pointer;display:block;padding:5px}
#sidebar a.back2Top{text-decoration:none;text-align:center;background:#344;color:#D4AF37;font-weight:bold;padding:5px;display:block}
#sidebar a.back2Top:hover{background:#456}
#sidebarContent{width:300px;background:#002147;padding:10px}
footer a{color:#FFF}
#main{margin-left:320px}
#wrapall{padding-top:60px}
#header{max-width:1000px;overflow:hidden;height:40px}
#wrapall,#header{max-width:1100px;margin:0 auto}
#headerLeft,#headerRight{display:inline-block;vertical-align:middle}
#headerLeft{text-align:center;width:100px}
#headerRight{height:40px}
#sidebar{float:left;position:absolute;background: #002147}
#sidebar a{margin:18px;padding:0;text-decoration:none}
#sidebar a:hover{color:#fff}
#page{padding:20px;border:1px solid #D4AF37;background: #FFF;}
#menuToggle,#mobileMenuToggle{background:#D4AF37;cursor:pointer;display:inline-block;font-size:40px;width:40px;font-weight:bold;text-align:center;height:40px;line-height:40px;color:#002147;border-radius:10px}
#mobileMenuToggle,#mobileLogo{vertical-align:middle;display:none;font-size:30px}
#menuToggle:hover{color:#FFF;background:#344}
.socialButtons{float:right;padding-top:8px}
.socialButtons a{display:inline-block;cursor:pointer;background:#40E0D0;padding:2px;width:33px;text-align:center;height:20px;font-weight:bold;color:#FFF;text-decoration:none;line-height:20px;font-size:20px;border-radius:5px;vertical-align:middle}
.socialButtons a.linkedin{background:#24568e}
.socialButtons a.youtube{background:#c00}
.socialButtons a svg{width:16px;height:16px;fill:#FFF}
.socialButtons a:hover {
    background: #FF6F61; /* Korallenrot */
}
.stick #sidebarContent{position:fixed;z-index:900;}
#stick-here{background:red}
.sidebarToggle #sidebar{display:none}
.sidebarToggle #main{margin-left:0}
@media screen and (max-width:1100px){header{padding:10px}
#headerLeft{width:auto}
#headerRight{width:60%}
}
@media screen and (max-width:820px){#sidebar{display:none}
#main{margin-left:0}
.sidebarToggle #sidebar{background:red;display:block}
.stick #sidebarContent{bottom:auto}
a#logo{font-size:20px;line-height:20px;padding:10px 5px}
aside > div{min-height:20px;padding:10px}
.sidebarToggle #menuToggle{background:#344;color:#FFF}
}
@media screen and (max-width:600px){#headerLeft{float:right}
#headerRight{height:auto;position:absolute;width:auto;top:46px;background:#6f9898;left:0;display:none}
.showMobileMenu #headerRight{display:block}
nav ul li a{display:block;text-align:center;font-size:16px;padding:3px 29px;line-height:25px}
.showMobileMenu #mobileMenuToggle{background:#344;color:#FFF}
nav ul li{display:block;margin:0}
.socialButtons{display:none}
header{padding:3px 10px}
#page{padding: 20px 10px}
#wrapall{padding-top:46px}
#sidebarContent{right:0;background:#002147}
#mobileLogo{display:inline-block;font-size:17px;padding:0 3px 0 10px;font-weight:bold;color:#FFF;text-decoration:none}
#mobileMenuToggle{display:inline-block}
}