/* ####################### Style  alle Seiten  #################### */   

 :root {
  --schrift-w: #f0f0f0;    
  /*--schrift-bl: #0572df; */
  --schrift-bl: #ff6347;     
  --hg: rgb(10, 10, 10);                  
  --nav-hg: rgba(24, 24, 24, 0.85);
  --popover-dunkel: rgba(0, 0, 0, 0.95);
  --boxen: #1f1d1d;               
  --box-schatten:#4e4d4d;      
  --tabelle: #2b2b2b;             
  --header-popover: rgba(22, 25, 29, 0.92); 
  --error: rgb(211, 48, 48);      

  --schrift: 'Raleway', sans-serif;
  --schriftA: 'Mansalva', latin;
} 


* { 
   padding:0; 
   margin:0; 
}

a:link { text-decoration: none; }   
a:active  { text-decoration: none;} 
a:visited { text-decoration: none; }  
a:hover { text-decoration: none; } 

body{ 
   max-width: 1920px;
   margin: auto;
   background-color: var(--hg);
   font-family: var(--schrift);
   letter-spacing: 1px;
   font-size: 15px; 
   color: var(--schrift-w);
}

          
img, video{ 
   max-width: 100%;
}

.inhalt{
      max-width: 800px;
      height: auto;
      margin: auto;  
      padding: 10px;
    }  
    
   
.abstand{ 
   height:  calc(20px + (60 - 20) * (100vw - 300px) / (1920 - 300) ); 
      }
      
.abstand-re{
   margin-right: 15px;
  }


h1{ 
   font-weight: 500;  
   color: var(--schrift-bl);
   font-size: calc(20px + (35 - 20) * (100vw - 300px) / (1900 - 300) );  
   letter-spacing: 1px; 
} 
   
h2{ 
   font-weight: 600;  
   color: var(--schrift-bl);
   font-size: 25px;  
   letter-spacing: 2px; 
} 

h3{ 
   font-weight: 500;  
   color: var(--schrift-w);
   font-size: 18px;  
   letter-spacing: 1px; 
} 

h4{ 
   font-weight: 400;  
   color: var(--schrift-w);
   font-size: 18px;  
   letter-spacing: 1px; 
} 

p{ 
   font-weight: 400;  
   color: var(--schrift-w);
   font-size: 17px;
   line-height: 24px;
   font-style: italic;
   letter-spacing: 1px; 
   hyphens: auto;  /* hyphens auto = Silbentrennung */
} 

.akzent{
   color: var(--schrift-w);
   margin-bottom: -10px;
   margin-left: 3px;
}

.fett{ 
   font-weight: 500;
   font-size: 17px;
   line-height: 24px;
   font-style: italic;
}

figcaption{ 
   font-family: var(--schrift); 
   font-size: 12px;
   line-height: 20px;
   font-weight: 200;
   font-style: italic;
   letter-spacing: 1px;
   margin-top: -3px; 
   margin-left: 5px; 
   color: var(--schrift-w);
   } 



.blocksatz{  
   text-align: justify; 
   hyphens: auto;
}      

@media(max-width: 300px){ 
   .blocksatz{ 
      text-align: left; 
   }   
} 

.selektor {
   text-decoration: line-through;
   }

/* Text im Bild */

  .bild-container {
      position: relative;
      display: inline-block;
    }

    .bild-container img {
      width: 100%;
      height: auto;
      display: block;
    }

.text-overlay {
      position: absolute;
      
      font-family: var(--schrift);    
  
      font-weight: 800;  

      font-size: clamp(20px, calc(20px + (80 - 20) * (100vw - 500px) / (1900 - 500)), 80px);
  line-height: clamp(10px, calc(10px + (80 - 10) * (100vw - 300px) / (1900 - 300)), 80px);
  
  
      color: rgba(255, 255, 255, 0.1); /* transparent;  Keine Füllung */
      -webkit-text-stroke: 1px var(--schrift-w); /* Konturfarbe und -stärke */
      text-stroke: 1px var(--schrift-w); /* Optional für Kompatibilität */
  
     letter-spacing: 5px; 
      
    }  

 .oben-links {
      top: 20px;
      left: 30px;
    }

    
@media (max-width: 750px) {
  .text-overlay {
     color: var(--schrift-bl);
     font-weight: 300; 
     font-size: 20px;
     letter-spacing: 2px;
     line-height: 22px;
    }
.oben-links {
      top: 8px;
      left: 30px;
    }
 }     
 
 @media (max-width: 450px) {
  .text-overlay {
    display: none;
    }
  .bild-container {
     display: none;
    }	
 } 
 
.h1extra{ 
      
  font-family: var(--schriftA);    
  
  font-weight: 900;  
  
  color: var(--schrift-bl);

  text-shadow:  1px 1px 0 var(--hg),
                2px 2px 0 var(--hg),
                3px 3px 0 var(--hg),
                4px 4px 0 var(--hg),
                5px 5px 0 var(--schrift-w),
                6px 6px 0 var(--schrift-w);
  
  font-size: clamp(30px, calc(30px + (160 - 30) * (100vw - 300px) / (1900 - 300)), 160px);

  letter-spacing: 7px; 

  line-height: 0.8; 
  
  position: relative;
  
  } 

   .untertiteloben{
    font-weight: 400;      
    font-size: 16px;     
    letter-spacing: 1px; 
    margin-left: 22px;   
    }

  .untertitel{
    font-weight: 400;      
    font-size: 16px;     
    letter-spacing: 1px; 
    margin-top: -5px;    
    }  
  

@media screen and (max-width: 850px){
  
  .h1extra{ 
    font-weight: 800;      
    color: var(--schrift-bl);    
    letter-spacing: 1px;   
    text-shadow: none;
    } 

  .untertiteloben{
    display: none;    
    } 
  .untertitel{    
    font-size: 14px;     
    }             
  } 

  @media screen and (max-width: 500px){
  .h1extra::after{ 
    display: none; 
    } 
    .h1extra{ 
      font-weight: 300;        
      letter-spacing: 1px; 
      text-shadow: none;
  } 
  .untertitel{
     display: none; 
    }        
  } 
 

.fusszeile {
   max-width: 1700px;
   margin: auto;
   height: auto;
   border-top: double 4px var(--schrift-bl);
   text-align: center;
}

.logo-abstand {
   padding: 8px; /* Abstand in der Fuszzeile */
}

.schrift {
   color: var(--schrift-w);
   font-style: italic;
   font-weight: 300;
}

.schrift:hover {
   color: var(--schrift-w);
   text-decoration: underline;
}