*{
    margin:0;
    padding:0;
 }
 
:root {
    /* --blue: #2E9CCA; */
    --blue: #309cdb;
    --gray: #4D4D4D;
    --text: #26374A;
    --slogan: #932440;
    --background: #EDEDED;
}

/* ############################################################ */
/* common */
/* ############################################################ */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font-family: sans-serif;
    font-size: 62.5%;
    line-height: 1.5;
}

body {
    height: 100%;
    font-size: 1.5rem;
    margin: 0 auto;
    overflow-x: hidden;
    color: #000;
    background: var(--background);
}


/* ---- headlines ----- */

h1 {
    color: var(--text);
    text-align: left;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    font-size: 2.4rem;
    line-height: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.center {
    color: var(--text);
    text-align: center;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    font-size: 2.4rem;
    line-height: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h2 {
    color: var(--text);
    text-align: left;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    font-size: 2.1rem;
    line-height: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h3 {
    color: var(--text);
    text-align: left;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.8rem;
    line-height: 3rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h4 {
    color: var(--text);
    text-align: left;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.5rem;
    line-height: 3rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h5 {
    color: var(--text);
    font-size: 1.8rem;
    text-align: center;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

h5:after {
    display: block;
    border-top: 1px solid #1f1f1f;
    width: 60px;
    content: "";
    margin: -.1rem auto;
}

.motivation {
    text-align: center;
    font-weight: 600;
    font-size: 1.6rem;
    margin: 1rem 1rem 0 1rem;
}

h6 {
    color: var(--text);
    text-align: center;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.8rem;
    line-height: 3rem;
    margin-top: 3rem;
    margin-bottom: 0rem;
}

/*  ----------------------------------------  */
/* links */
/*  ----------------------------------------  */

a {
    color: var(--text);
    text-decoration: underline; 
}

label a { cursor: pointer; }

a:hover {
    color: var(--text);
    text-decoration: none;
}


/* ############################################################ */
/*  special */
/* ############################################################ */

/* size of pictures */
img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
}

.img .no-shadow { box-shadow: none; }

/* size of videos */
video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


/*  ----------------------------------------  */
/* listing special  */
/*  ----------------------------------------  */




li a:hover {
   color: #FFA500; /* Change color */
   font-weight: bold; /* Make bold */
   }

/* ----- style 1 - with bullet points ----- */

.list-special { display: block; padding: 0;}

.list-special ul {
    text-align: left;
    margin: 0;
    padding: 0 0 0 2rem;
}

/* bullet point type and color */
.list-special li { list-style: square; }
.list-special li::marker { color: #788596; }


/* ----- style 2 - with leading icon (fontawesome) ----- */

.list-special-2 ul {
    text-align: left;
    margin: 0 0 0 -1rem;
    padding: 0 0 0 2rem;
}

.list-special-2 li {
    list-style: none;
    list-style-position: inside; /* indents second line */
    text-indent: -1.4rem; /* indents second line */
    padding-left: 1.5rem; /* indents second line */
}

.list-special-2 i { transform: scale(.9); padding-right: .8rem; color:#788596; }
.list-special-2 li a:hover i { color:#c0a780; }


/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM  - for pictures / columns */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

/* ---------- boxes - base ---------- */

.box {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: 100%;
    padding: 1.5rem 2rem;
    margin: -.25rem; /* balancing ( minus-margin) for INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-webcam-buttons {
    text-align: center;
    padding-top: .7rem;
    padding-bottom: 1rem;
}

.box-1_of_1,
.box-1_of_2,
.box-1_of_3,
.box-1_of_4,
.box-1_of_5 { width:100%; }


/* ---------- boxes - pictures ---------- */

.pictures  { margin: 1rem -1rem; text-align: center; }
.pictures .box  { padding: 1rem 1.5rem}

.pictures .box-1_of_1,
.pictures .box-1_of_2,
.pictures .box-1_of_3,
.pictures .box-1_of_4 { width: 100%; }
.pictures .box-1_of_4b { width: 50%; }

.pictures.gallery .box-1_of_2 { width: 50%; }
.pictures.gallery .box-1_of_3 { width: 33.33%; }
.pictures.gallery .box-1_of_4 { width: 50%; }

.pictures.gallery img { border-radius: .5rem; }


/*  ---------- boxes - other ---------- */

.wrapper {
    display: inline-block;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 3px #0003;
    border-radius: 1rem;
    padding: 1.5rem;
}

/* only addresses the nested 2-boxes with .special */
.special.box.box-1_of_2 { width: 100%; }

#fuss .box-1_of_3 { width: 100%; }


/* ############################################################ */
/* header */
/* ############################################################ */

header {
    display: block;
    height: 100%; 
    padding: 0; 
}

#logo {
    display: block;
    text-align: center;
    padding: 0 0 1.2rem 0;
}

.logo-a, .logo-b {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.logo-a.wrapper {
    background-image: url(../images/logo_neu_gedreht.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    border-radius: 0;
    padding: 0;
}

.logo-a .box {padding: 0; }

#logo .name {
    display: block;
    font-family: sans-serif;
    text-align: center;
    color: #191970;
    font-weight: bold;
    /*text-transform: uppercase;*/
    font-size: 2.5rem;
    line-height: 2rem;
    letter-spacing: 1px;
    margin: 0;
    padding: 5rem 0 0 0;
}

#logo .name .slogan {
    display: block; 
    color: var(--slogan);
    font-size: 2rem;
    line-height: 2rem;
    padding: .5rem .5rem 3rem .5rem;
}

#logo .page-title {
    display: block;
    background: var(--gray);
    color: #fff;
    font-size: 1.5rem;
    line-height: 2rem;
    padding: .2rem 0;
    text-transform: none;
}


/* ############################################################ */
/* content */
/* ############################################################ */

#content {
    display: block;
    text-align: center;
    padding: 0 1rem;
}

.content-a {
    display: inline-block;
    width: 100%;
    margin: .8rem 0;
    padding: 0;
}

.warnmodule-container {
    display: flex;
    justify-content: center;
}

.warnmodule {
    width: 915px;
    font-size: 1.5rem;
    border: 3px solid red;
    margin: 1.5rem 0 0 0;
    padding: 1.5rem 3rem;
}

.warn-header {    
    font-weight: bold;    
    margin: 2rem 0 .5rem 0;
}

.warn-header:first-of-type { margin-top: -.5rem; }
.warn-text { margin: 0; }
.warn-link { margin: 1rem 0 0; }

.warn-button-close {
    display: block;
    float: right;
    text-align: center;
    margin: -1rem -2.5rem 0 0;
    background: transparent;
    color:#1f1f1f;
    height: 4rem;
    width: 4rem;
    font-size: 1.8rem;
    cursor: pointer;
}

input[type=checkbox] {display: none; }

.warnmodule:has( > #close-warnmodule:checked)  { display: none; }

.iframe-container { 
    display: flex;
    justify-content: center;
}

.iframe {
    overflow: hidden;
    margin: 1.5rem -.8rem 0 -.8rem;
}
    
.iframe-compact { width: 1015px; height: 650px; }
.iframe-weather { width: 1015px; height: 3430px; }
.iframe-stationsrekorde { width: 1015px; height: 1380px; }
.iframe-jahr { width: 1015px; height: 1380px; }
.iframe-monate { width: 1015px; height: 1470px; }
.iframe-kenntage { width: 1015px; height: 520px; }
.iframe-klima { width: 1015px; height: 1950px; }
.iframe-dekade { width: 1015px; height: 1810px; }
.iframe-archiv { width: 1015px; height: 2090px; }


/* ############################################################ */
/* footer */
/* ############################################################ */

#foot {
    display: block;
    text-align: center;
    padding: 0 1rem 2rem 1rem;
}

h5 {
    text-align: left;
    font-size: 1.3rem;
    color: var(--text);
    letter-spacing: 1px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

h5:after {
    display: block;
    border-top: 1px solid #6F6F6F;
    width: 50px;
    content: "";
    margin-top: 0;
    margin-bottom: 0;
}

.foot-a,
.foot-a a {
    color: var(--text);
    text-shadow: none;
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 2.5rem;
    text-decoration: none;
    padding: 0;
    background-color: var(--background);
    box-shadow: none;
}

.foot-menu ul { text-align: center; padding: 0; margin: 0; }
.foot-menu li { list-style: none; }
#foot li a:hover { color: var(--blue); text-decoration: none; }

.foot-menu li::after {
    display: inline-block;
    content: "";
    color: #1f1f1f;
    font-weight: normal;
    padding: 0 .1rem 0 .3rem;
}

.foot-menu li:last-child::after { content: ""; }


/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* ############################################################ */

/* ==================================== from 480 pixel ================================== */
@media (min-width: 480px) {

html { font-size: 65%; }

.wrapper { padding: 1rem 1.5rem; }
.foot-a { padding: 0 }

.pictures .box-1_of_4  { width: 50%; }

.webcam-button { font-size: 1.4rem; min-width: 12rem; padding: .6rem 2rem; }

}


/* ==================================== from 580 pixel ================================== */
@media (min-width: 580px) {

.wrapper { width: 92%; }

.pictures .box-1_of_2  { width: 90%; }
.pictures.gallery .box-1_of_4 { width: 25%; }

.foot-menu li { display: inline-block; }
.foot-menu li::after { content: "|"; }

}


/* ==================================== from 640 pixel ================================== */
@media (min-width: 640px) {

#foot .box-1_of_3  { width: 50%; }

}


/* ===================================== from 960 pixel ================================= */
@media (min-width: 960px) {

html { font-size: 65%; }

/* hiding page title */
#logo .page-title { display: none; }

#logo .name { font-size: 4rem; line-height: 3.2rem; padding-top: 4rem; padding-bottom: 6rem; }
#logo .name .slogan { font-size: 2.4rem; line-height: 2.2rem; padding: .5rem; }

.logo-a .box { padding: 2rem 0 0 0;}

.wrapper { width: 90%; }

.box { padding: 1rem 5rem; }

.motivation { margin-left: 5rem; margin-right: 5rem; }

.pictures.gallery  img  { border-radius: 2rem; }
.pictures .box-1_of_2  { width: 50%; }
.pictures .box-1_of_3  { width: 33.33%;  }
.pictures .box-1_of_4  { width: 25%; }

/* contents of the special boxes set to vertical alignment */
.special.box  { vertical-align: middle;}

/* only addresses the nested 2-boxes with .special */
.special.box.box-1_of_2 { width: 50%; }

.foot-a, .foot-a a { font-size: 1.6rem; }
h5 {font-size: 1.3rem; }
#foot .box-1_of_2  { width: 50%; }
#foot .box-1_of_3  { width: 33.33%; }
#foot .box-1_of_4  { width: 25%; }

/* only applies to every second article in the footer box, here for SOCIAL MEDIA ICONS  */
#foot .box article:nth-child(2) { margin-top: .5rem; }

.iframe-compact { height: 370px; }
.iframe-weather { height: 1240px; }
.iframe-stationsrekorde { height: 720px; }
.iframe-jahr { height: 480px; }
.iframe-monate { height: 520px; }
.iframe-kenntage { height: 280px; }
.iframe-klima { height: 520px; }
.iframe-dekade { height: 480px; }
.iframe-archiv { height: 560px; }

}


/* ===================================== from 1024 pixel ================================= */
@media (min-width: 1024px) {

pre { width: 70%; }

}


/* ===================================== from 1200 pixel ================================= */

@media (min-width: 1200px) {

}

/* ===================================== from 1300 pixel ================================= */
@media (min-width: 1300px) {

.wrapper  { width: 1200px; }

}