'use strict'
/*RESET & PAGEWIDE*/
* {
    padding: 0px;
    margin: 0px;
}
body {
    margin: 0px;
    font-family: 'PT Sans', sans-serif;
    background: linear-gradient(#daefd0, #609e4c);
}
a { color: darkgreen;
    text-decoration: none;}
#stickynav {
    display: block;
    float: left;
    position: sticky;
    position: -webkit-sticky; 
    top: 0px;
    background-color: #609e4c;
    text-align: center;
    padding: 0px 5px;
    margin-bottom: 0px;
    border-radius: 3px;
    font-size: 14px;
}
#stickynav ul {
    padding-left: 0px;
}
#stickynav li {
    padding: 10px 0px;
    list-style-type: none;
}

#stickynav li img {height: 18px;}
#stickynav a, a:visited { color: darkgreen}
section { border-top: 1px solid #000;}
section#welcome { border-top: 0px;}

#container {
    margin: 20px auto;
    display: block;
    width: 70%;
}
section {margin-bottom: 30px;}
table {border-collapse: collapse;}
td, th {border: 1px solid #000;}
h1 {
    font-family: 'Satisfy', cursive;
    text-align: center;
    font-size: 200%;
}

.icon, .up {
    display: inline-block;
    width: 18px;
    height: 20px;
    background: url(icons/up-icon.png);
}
/*WELCOME SECTION*/
#welcome {text-align: center;}
#cover { 
    display: block;
    min-height: 500px;
    width:  auto;
    background: url('imgs/cover2.JPG');

    background-size: cover;
}

/*UNTERRICHT*/
#introunterricht {
    text-align: center;
    font-size: 120%;
    display: block;
    margin-bottom: 10px;
}
#unterrichts-bilder {
    display: grid;
    align-content: stretch;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 5px;
    margin-bottom: 20px;
}

.unterrichts-bild.kids, .unterrichts-bild.morekids, .unterrichts-bild.morekids1, .unterrichts-bild.notkids {
    display: block;
    height: 200px;
    background-position: center;
    background-size: cover;
}

.unterrichts-bild.kids {
    background-position-y: -30px;
}

.kids { background: url('imgs/kids.jpg');}
.morekids { background: url('imgs/morekids.jpg');}
.morekids1 { background: url('imgs/morekids1.jpg');
            background-position: center bottom;}

#unterrichts-inhalt {
    display: grid;
    align-content: stretch;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 5px;
    margin-bottom: 20px;
}

.unterrichts-box {
        background-color: #609e4c;
        min-width: 170px;
        border-radius: 5px;
        padding: 20px 10px;
}
.unterrichts-box img {
    display: block;
    margin: 0 auto;
}
.unterrichts-box h3{
    font-size: 150%;
    text-align: center;
    margin: 20px 0 20px;
}
.quotebox {
    border: 1px solid #000;
    padding: 10px;
    margin: 20px auto;
}

/*LEHRPERSON*/
#box-lehrperson {display: block;}
/*ORTEZEITEN*/
#ortezeiten-grid {
    display: grid;
    align-content: stretch;
    grid-template-columns: repeat(2, auto);
    justify-items: center;
    margin-bottom: 10px;
}

#ortezeiten-grid h2 {text-align: center;}

.breakingnews {
	display: block;
	background-color: red;
	color: white;
	font-size: 20px;
	text-align: center;
}

.ortsbild.wald,.ortsbild.rueti {
    display: block;
    min-width: 300px;
    min-height: 200px;
    margin: 0px auto 20px;
    border-radius: 5px;
    margin-right: 10px;
    background:  url('imgs/wald_3.jpg');
    background-size: cover;
    background-position: center;
}
.ortsbild.rueti { 
    background:  url('imgs/rueti_1.jpg');
    background-size: cover;
    background-position: center;
}
.infobox {
    margin-right: 10px;
    display: block;
}
table.infoboxtable  {
    height: 350px;
    min-width: 300px;
}

.infoboxtable tr td {
    height: 115px;
    padding: 10px;
}

td.odd { background-color: #e7e7e7;}
td.even {width: 465px;}
.unterrichtsdaten img {
    display: block;
    float: left;
    margin-right: 5px;
}

.unterrichtsdaten a {
    font-weight:bold;
    font-size: 22px;
}
/*REGLEMENT*/
.leistungen-fett { 
    font-weight: bold;
    font-size: 110%}
li>ul {padding-left: 20px;}

table#preise  {
    margin: 10px auto;
    border-radius: 5px;
}
table#preise td,th {
    padding: 5px;
    min-width: 120px;
    width: 200px;
}

#preise th {background-color: #609e4c;}
#preise td {background-color: #9cd487;}

#footer {
    padding-top: 15px;
    display: block;
    text-align: center;}