/* COLOUR PALETTE */  

:root{
  
--header_background: rgb(250 120 000 / 1.0);  
--main_background: rgb(250 250 250 / 1.0);
  
--primary_text:   rgb(010 010 010 / 1.0);
--secondary_text: rgb(130 035 035/ 1.0);  
--highlight_text: rgb(000 000 240 / 1.0); 
  
--border_colour:  rgb(095 070 030 / 1.0);  
  
}

/* GLOBAL STYLES AND RESETS */  

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

html{
font-size: 62.5%;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
interpolate-size: allow-keywords;  
scroll-behavior: smooth;
}

body{
font-family: Verdana;
font-size: 1.6rem; 
background: var(--main_background);  
color: var(--primary_text); 
}

/* HEADER STYLES */  

header, nav{
padding-block: 2rem;
padding-inline: max(2rem, calc((100% - 120rem) / 2)); 
background: var(--header_background); 
}

header h1{
color: var(--highlight_text); 
text-wrap: balance;
text-align: center;
}

header h1 span{
display: block; 
margin-bottom: 1rem; 
}

nav ul{
list-style: none;
display: flex;
flex-wrap: wrap; 
justify-content: center; 
align-items: center; 
gap: 1rem 2rem; 
}

nav ul li{
flex: 0 0 auto; 
white-space: nowrap;
font-size: 1.6rem;
font-weight: bold; 
}

div.search_bar{
position: sticky;
top: 0;
height: 4rem; 
z-index: 900; 
background: var(--main_background); 
padding-inline: max(2rem, calc((100% - 80rem) / 2)); 
border-bottom: 0.2rem solid var(--border_colour); 
}

a.one:link {color:blue; text-decoration-line: none;}
a.one:visited {color:blue; text-decoration-line: none;}
a.one:active {color:#782c00;}

/* MAIN CONTENT LAYOUT */  

div.wrapper{
padding-inline: max(1rem, calc((100% - 140rem) / 2)); 
display: flex;
gap: 1rem; 
border-bottom: 0.2rem solid var(--border_colour); 
}

/* SIDEBAR NAVIGATION STYLES */  

aside{
flex: 1 1 auto; 
min-width: min-content; 
position: sticky;
top: 4rem;
height: calc(100dvh - 6.5rem);
overflow-y: auto; 
overscroll-behavior: contain;
border-right: 0.2rem solid var(--border_colour); 
padding-inline: 1rem;
}

ul.sidebar_navigation{
list-style: none;  
background: var(--main_background);  
min-height: calc(100dvh - 8.5rem);
display: flex;
flex-direction: column;
justify-content: center; 
gap: 2rem; 
padding-block: 3rem;
}

ul.sidebar_navigation li{
padding-inline: 1rem;
text-align: right; 
font-weight: bold; 
font-size: 1.6rem; 
}

/* MAIN CONTENT STYLES */ 

main{
padding-block: 2rem; 
}

h2{
color: var(--secondary_text); 
padding-block: 1rem;
font-size: 2.4rem;
text-wrap: balance; 
text-align: center; 
}
h2:first-of-type{
margin-block-end: 3rem;
border-bottom: 0.1rem solid var(--border_colour); 
}
h2:last-of-type{
margin-block-start: 3rem;
}

p{
display: inline; 
font-size: 1.6rem;
line-height: 1.2; 
text-wrap: pretty;
letter-spacing: 0.02em; 
}
p span,
p a{
font-weight: bold; 
}

section.title_content p{
display: block; 
text-align: center;
margin-block: 2rem; 
}

ul.letter_select{
list-style: none; 
display: flex;
flex-wrap: wrap; 
gap: 1rem 2rem; 
justify-content: center; 
padding-inline: 2rem;
padding-block: 3rem;
font-size: 3rem; 
}

ul.letter_select2{
list-style: none; 
display: flex;
flex-wrap: wrap; 
gap: 1rem 0.8rem; 
justify-content: center; 
padding-inline: 2rem;
padding-block: 0.6rem;
font-size: 2.1rem; 
font-weight: bold;
}

ul.letter_select3{
list-style: none; 
display: flex;
flex-wrap: wrap; 
gap: 1rem 0.8rem; 
justify-content: center; 
padding-inline: 2rem;
padding-block: 0.6rem;
font-size: 1.6rem; 
font-weight: bold;
}

section{
padding-block-end: 2rem;
border-bottom: 0.2rem solid var(--border_colour); 
}

section.name_list{
padding-block-start: 0.8rem; 
}

section.name_list:last-of-type{
border: none; 
}

article{
margin-block-end: 1rem;
padding: 1rem; 
padding-block-end: 1rem; 
padding-block-start: 0rem; 
margin-block-start: 0rem;
background:var(--main_background);
border-bottom: 1px solid #aaa;
}
article:last-of-type{
border: none; 
}

h3{
font-weight: bold;
font-size: 1.8rem;
display: inline; 
}

h4{
color: var(--secondary_text);  
font-weight: bold;
font-size: 3rem; 
padding-block: 2rem; 
}

h5{
color: #bf0f02;  
font-weight: bold;
font-size: 2rem; 
padding-block: 2rem; 
}

hr{
margin-block: 1rem; 
border-top: 1px dashed red;
}


/* FOOTER STYLES */ 

footer{
padding-block-start: 2rem; 
}

footer > div{
padding-block: 2rem;
padding-inline: max(2rem, calc((100% - 120rem) / 2)); 
text-align: center; 
}

footer > div:nth-of-type(2){
font-weight: bold; 
margin-bottom: 2rem; 
}

div.fusszeilen{
background: var(--header_background); 
}

div.fusszeilen a{
display: block; 
font-weight: bold; 
font-size: 2.2rem; 
padding-block: 2rem; 
}

div.fusszeilen p{
padding-block-end: 2rem; 
display: flex;
justify-content: space-between; 
gap: 3rem; 
flex-wrap: wrap; 
}

div.fusszeilen p span{
flex: 1 1 auto; 
}

.anchor-jumper {
  font-weight: normal;
  text-decoration: none;
  color: #b34100;
}
.anchor-jumper:hover {
  text-decoration: underline;
}
.anchor-target[id] {
  scroll-margin-top: 100px; /* works for same-page anchors */
  position: relative;
  top: -100px; /* visually offset for page load anchors */
}