:root {
  --schrift-w: #cfcfc4;    
  --schrift-bl:  #ff6347; 
  --schrift-hervorgehoben: #e9ecb4; 
  --hg: rgb(10, 10, 10);                  
  --nav-hg: rgba(24, 24, 24, 0.9);
  --eingabe: rgba(161, 155, 155, 0.95);
  --boxen: #1f1d1d;               
  --box-schatten:#4e4d4d;      
  --tabelle: #2b2b2b;  
  --senden: #443b3b;
  --header-popover: rgba(22, 25, 29, 0.92); 
  --error: rgb(160, 8, 8);   

  --raleway: 'Raleway', sans-serif;
  --playfair: 'Playfair Display', serif;
  --display: 'DM Serif Display', serif;
  --sakana:   'Sakana', serif;
  --rushdriver:   'RushDriver', serif;
}

#backToTop {
  display: none; /* Versteckt den Button standardmäßig */
  position: fixed; /* Button bleibt an der gleichen Position auf dem Bildschirm */
  bottom: 20px; /* Abstand vom unteren Bildschirmrand */
  right: 10px; /* Abstand vom rechten Bildschirmrand */
  z-index: 99; /* Stellt sicher, dass der Button über anderen Inhalten liegt */
  border: none; /* Keine Umrandung */
  outline: none; /* Keine Umrandung beim Fokus */
  background-color: var(--hg); /* Hintergrundfarbe */
  color: var(--schrift-color); /* Textfarbe */
  font-size: 50px;
  cursor: pointer; /* Zeigt den Cursor als Hand an */
  padding: 2px 5px; /* Innenabstand */
  border-radius: 3px; /* Abgerundete Ecken */
}

*{
  padding: 0;
  margin: 0;
}

body{
  background-color: var(--hg);
  color: var(--schrift-w);
  font-family: var(--raleway);
  letter-spacing: 2px;
}

.inhalt-box{
  max-width: 1000px;
  height: auto;
  margin: auto;
}

.grid-inhalt {
  display: grid;
  grid-template-columns: 370px auto;
  grid-gap: 10px;
  padding: 10px;
}

@media (max-width: 800px) {
  .grid-inhalt {
    grid-template-columns: auto;
  }
}


img{
  max-width: 100%;
}

.top-container{
  max-width: 850px;
  height: auto;
  margin: auto;
  padding: 15px;
  background-color: var(--container-color);
  color: var( --schrift-color);
}


img{
  float: left;
  padding-right: 30px;
}

h1, h2{
  font-family: var(--schrift); 
  font-size: calc(16px + (20 - 16) * (100vw - 300px) / (1900 - 300) ); 
  font-weight: 300;
  color: var(--schrift-color);
  letter-spacing: 1px; 
  hyphens: auto;
}

p{
  font-family: var(--schrift); 
  font-size: 17px; 
  color: var(--schrift-color);
  font-weight: 300;
  letter-spacing: 1px; 
  line-height: 22px;
  hyphens: auto;
}

a{
  font-family: var(--schrift); 
  font-size:  18px; 
  color: var(--schrift-color);
  font-weight: 300;
  text-decoration: none;
  letter-spacing: 1px; 
  line-height: 26px;
  hyphens: auto; 
}

a:hover{
  color: var(--schrift-color-hover);
}

.abstand{
  margin-top: 15px;
}