html {
    background-color: #F8F9FA;
    font-size: 18px;
}

@font-face {
    font-family: "Spectral";
    src: url(fonts/Spectral/Spectral-Regular.ttf) format("truetype");
    font-style: normal; font-weight: 400;
}
@font-face {
    font-family: "Spectral";
    src: url(fonts/Spectral/Spectral-Bold.ttf) format("truetype");
    font-style: bold; font-weight: 600;
}
@font-face {
    font-family: "Spectral";
    src: url(fonts/Spectral/Spectral-Italic.ttf) format("truetype");
    font-style: italic; font-weight: 400;
}
@font-face {
    font-family: "Oranienbaum";
    src: url(fonts/Oranienbaum/Oranienbaum-Regular.ttf) format("truetype");
    font-style: normal; font-weight: 400;
}


:root {
      --bgweiss: #F8F9FA;
      --obsidiannight: #060917;
      --blackpearl: #021629;
      --schattengrau: #C0C0C0;
      --aztecgold: #C39953;
      --bronze: #422C09;
      --oxblood: #8A1D04;
}


body {
    font-family: "Spectral", serif;
    color: var(--obsidiannight);
    line-height: 1.5;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
}


.seite {
    background-color: var(--bgweiss);
    width: 1100px;
    margin: -120px auto 0;
    position: relative;
    border: 1px solid var(--schattengrau);
    box-shadow: 10px 0 10px var(--schattengrau);
    padding: 50px;
}

@media (max-width: 1200px){ .seite {max-width: 1000px; margin: -100px auto 0; } }
@media (max-width: 1050px){ .seite {max-width: 800px; margin: -50px auto 0; } }
@media (max-width: 850px){ .seite {max-width: 700px; margin: -30px auto 0; } }
@media (max-width: 730px){ .seite {max-width: 100%; margin: -7px auto 0; border: none; box-shadow: none; padding: 40px; } }
@media (max-width: 500px){ .seite {padding: 25px; } }


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


h1 {
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 2.5rem;
    color: var(--blackpearl);
}
h2 {
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 2rem;
    color: var(--blackpearl);
}
h3 {
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1.75rem;
    color: var(--blackpearl);
}
h4 {
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1.5rem;
    color: var(--blackpearl);
}


@media (max-width: 920px){ h1 { font-size:2rem; } }
@media (max-width: 920px){ h2 { font-size:1.75rem; } }

@media (max-width: 700px){ h1 { font-size:1.75rem; } }
@media (max-width: 700px){ h2 { font-size:1.5rem; } }
@media (max-width: 700px){ h3 { font-size:1.5rem; } }


a:link { color: var(--bronze); }
a:visited { color: var(--bronze); }
a:hover { color: var(--oxblood); }
a:active { color: var(--oxblood); }



/* === GRID-AUFBAU, 6 flexible Spalten === */

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;              /* Abstand zwischen den “Zellen” */
  align-items: start;
  padding: 0;
}

.span-1 {grid-column: span 1;}
.span-1_vert-mittig {grid-column: span 1; align-self: center;}
.span-2 {grid-column: span 2;}
.span-2cen {grid-column: span 2; justify-self: center; align-self: center;}
.span-3 {grid-column: span 3;}
.span-3-extra {grid-column: span 3;}
.span-4 {grid-column: span 4;}
.span-4-extra {grid-column: span 4;}
.span-4cen {grid-column: span 4; justify-self: center;}
.span-5 {grid-column: span 5;}
.span-6 {grid-column: span 6;}

.rowspan-2 {grid-row: span 2;}

.grid-6 > * {min-width: 0;} /* verhindern, dass sehr lange Wörter Grid sprengen */

@media (max-width: 850px){
    .span-1 {grid-column: span 2;}
    .span-1_vert-mittig {grid-column: span 2;}
    .span-2 {grid-column: span 3;}
    .span-2cen {grid-column: span 3;}
    .span-4-extra {grid-column: span 6;}
    .span-5 {grid-column: span 6;}
}

@media (max-width: 600px){
    .span-3-extra {grid-column: span 6;}
}

@media (max-width: 500px){
    .span-1 {grid-column: span 3;}
    .span-2 {grid-column: span 6;}
    .span-1_vert-mittig {grid-column: span 6;}
    .span-2cen {grid-column: span 6; justify-self: center;}
    .span-3 {grid-column: span 6;}
    .span-4 {grid-column: span 6;}
    .span-4cen {grid-column: span 6; justify-self: center;}
}



/* === HEADER & NAVI HEADER=== */

.header {
    width: 100%;
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1.75rem;
    color: var(--blackpearl);
    text-align: center;
}

.header > p > span { font-size: 2.5rem; }

@media (max-width: 920px){
    .header { font-size: 1.5rem; }
    .header > p > span { font-size: 2rem; }
}

@media (max-width: 500px){
    .header { font-size: 1.3rem; }
    .header > p > span { font-size: 1.75rem; }
}

.header-nav {
    width: 100%;
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1.3rem;
    justify-content: space-around;
    align-self: center;
    display: flex;  
}

.header-nav-900 {
    width: 100%;
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1rem;
    justify-content: space-around;
    align-self: center;
    display: none;  
}

.header-nav-500 {
    width: 100%;
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1rem;
    justify-content: space-around;
    align-self: center;
    display: none;  
}

@media (max-width: 900px) {
    .header-nav { display: none; }
    .header-nav-900 { display: flex; }
}
@media (max-width: 500px) {
    .header-nav-900 { display: none; }
    .header-nav-500 { display: flex; }
}

.header-nav > p { padding: 0 20px 0 0; }
.header-nav-900 > p { padding: 0 15px 0 0; }
.header-nav-500 > p { padding: 0 10px 0 0; }

.header-nav > p > a,
.header-nav-900 > p > a,
.header-nav-500 > p > a {
    text-decoration: none; 
    color: var(--blackpearl);
}

.header-nav > p > a:hover,
.header-nav > p > a:active,
.header-nav-900 > p > a:hover,
.header-nav-900 > p > a:active,
.header-nav-500 > p > a:hover,
.header-nav-500 > p > a:active { 
    color: var(--oxblood); 
}

.symbol {
    max-height: 1.3rem;
    height: auto;
}

#headerbild {
    width: 100%;
    height: auto;
    align-self: center;
}


/* === FOOTER und NAVIGATION im Footer === */

.footer-nav {
    width: 100%;
    font-family: "Oranienbaum", "Spectral", serif;
    font-size: 1.3rem;
    display: flex;  
}
.footer-nav > p { padding: 0 15px 0 0; }

.footer-nav > p > a { 
    text-decoration: none; 
    color: var(--blackpearl);
}
.footer-nav > p > a:hover { color: var(--oxblood); }
.footer-nav > p > a:active { color: var(--oxblood); }

@media (max-width: 900px) { .footer-nav { font-size: 1rem; } }
@media (max-width: 620px){ .footer_design { display: none; } }



/* === ALLGEMEINE WEITERE DESIGNENTSCHEIDUNGEN === */

hr {
    border: none;
    border-top: 1px solid var(--aztecgold);
}

.hr-abstand-gross {
    background-color: var(--bgweiss);
    border: none;
    margin-top: 30px;
    margin-bottom: 30px;
}

.hr-abstand {
    background-color: var(--bgweiss);
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
}

.hr-abstand-schmal {
    background-color: var(--bgweiss);
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* === BILDANORDNUNGEN === */

.ergo {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.reihe-2pics {
    width: 49%;
    height: auto;
}

.reihe-3pics {
    width: 33%;
    height: auto;
}

.reihe-einpic {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bild-2-spalten {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}