/* Seitenaufteilung, Template */

html {
    display:grid;
    height: 100%;
}
header {
    width: 100%;
    position: fixed;
}
body {
    grid-column: 1;
    margin:0px;
	font-size:13pt;
}
main {
    height:calc(100% - 54px);
    margin:8px;
    padding-top: 15.7vw;
}
footer {
    height:30px;
}

/* Schriften vorbereiten */
@font-face {
  font-family: 'WinkySans'; /* Eigener Name für die Schrift */
  src: url('WinkySans-VariableFont_wght.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Wichtig für Performance */
}

/*=======================================*/
/* Seitenbereiche                        */
a {
    color: #00FFFF;
}
body {
    background-color: #000080;
    color: #CCCC00;
    font-family: WinkySans, 'Open Sans', Helvetica, sans-serif, Arial;
    letter-spacing: 0.05em;
    max-width:1400px;
    margin:0px auto;
}
header {
    background-image:url('../images/header.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    max-width:1400px;
    max-height:222px;
}
footer {
    font-size: 10pt;
    font-weight: bold;
    text-align:center;
    background-color:#000040;
    padding-top:8px;
}
headline {
    font-weight: bold;
    font-size: 20pt;
    font-style:italic;
    display:block;
}

/*==================================*/
/* Inhaltselemente Formatioerung    */
#FirefoxLogo {
    height: 100%;
}
.width-800 {
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
}
hr {
    max-width:600px;
    color:red;
    box-shadow: 0px 1px 3px yellow;
    margin:30px auto;
}
strokeout {
    color:gray;
    text-decoration: line-through double;

}
tr, td {
    padding:3px;
}
table {
    border-spacing: 0px;
    border-color: #0000FF;
}

/*======================================*/
/* Animationen                          */
body.scrolled-down header {
    height:0px;
    transition: height 0.5s ease-out;
    border-bottom:solid 8px #000080;
}
body header {
    height:15.7vw;
    transition: height 0.5s ease-out;
}

/*======================================*/
/*   Bildschrimgrößen Anpassung         */
@media (min-width: 1024px) {
    body.scrolled-down header {
        height:9vw;
        transition: height 0.5s ease-out;
    }
}