/* font-family: 'Raleway', sans-serif;  */

:root{ 
    --schrift-color: #f0ecec;  
    --schrift-color-hover: rgb(165, 246, 16);
    --background-color: #124540;
    --senden: #0a2523;
    --senden-hover: #0b3a34;
    --error: #ac0808;
    /* -- background-color: #3F8166;  */

    --schrift: 'Raleway', sans-serif;
}


* { 
    padding:0; 
    margin:0; 
}

html {
    /* Verhindert automatische Schriftvergrößerung in iOS Safari */
    -webkit-text-size-adjust: 100%;
    
    /* Standard für andere Browser (falls unterstützt) */
    text-size-adjust: 100%;
}

body{  
    color: var(--schrift-color); 
    font-family: var(--schrift);
  /* Sorgt für schärfere Darstellung auf hochauflösenden Displays (Retina) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    hyphens: auto; /* hyphens auto = Silbentrennung */
    background-color: var(--background-color); 
}

.bild-container {
  display: flex;
  justify-content: center;
  max-width: 120.313rem; /* 1925px -> 120.313rem */ 
  margin-inline: auto;
  width: 100%;
}

.image-wrapper {
  position: relative; /* Wichtig: Der Ankerpunkt für die Caption */
  display: inline-block; /* Sorgt dafür, dass der Wrapper nur so breit wie das Bild ist */
}

.image-wrapper img {
  display: block; /* Verhindert einen kleinen Spalt unter dem Bild */
  max-width: 100%;
  height: auto;
}

figcaption {
  position: absolute;
  bottom: clamp(-0.95rem, -20vw + 0.89rem, 0.625rem);  /* dynamischer Abstand vom unteren Bildrand */
  left: 0.625rem;      /* 10px -> 0.625rem */ 
  font-size: 0.75rem;  /* 12px -> 0.75rem */
  font-family: var(--schrift); 
  color: var(--schrift-color); 
}

img{ 
    max-width: 100%; 
    height: auto;
}

.transparenz{ opacity: 0.75; } 

video {  
    width: 100% !IMPORTANT;
    height: auto !IMPORTANT;
 } 
   

.box, .start, .angebot, .ubermich, .yt, .gedanken
  {
    max-width: 54rem; /* 864px -> 54rem */
    height: auto;
    margin: auto;
    padding: 0.938rem;  /* 15px -> 0.938rem */
}


.nachunten{
    margin-top: 0;
}

@media(max-width: 31.25rem){ /* 480px -> 31.25rem */
    .nachunten{
        margin-top: 5.625rem; /* 90px -> 5.625rem */
    }
} /* Korrektur der Anker-Position: Verhindert das Überlagern durch den mobilen Header. */


.abstand {
    height: clamp(0.625rem, 0.0273rem + 2.333vw, 3.125rem);
  } /* 10px -> 0.625rem | 50px -> 3.125rem */
  /* Definiert einen dynamischen vertikalen Puffer, der das Layout auf Mobilgeräten kompakt hält und auf Desktops großzügig öffnet. */


.veranstaltung {
    max-width: 37.5rem; /* 480px -> 37.5rem */
    height: auto;
    margin: auto;
    padding: 0.625rem; /* 10px -> 0.625rem */
    border: thin solid var(--schrift-color);
    border-radius: 0.5rem; /* 5px -> 0.313rem */
  }
 

.auszeichnungen{
    max-width: 34.375rem; /* 550px -> 34.375rem */
    height: auto;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 0.5rem; /* 8px -> 0.5rem */
}

@media(max-width: 31.25em){
    .auszeichnungen{
        grid-template-columns: auto auto;
        justify-content: center; 
        padding: 0.5rem; /* 8px -> 0.5rem */
    }
}
                 
.grid-gedanken{
    max-width: 46.875em; /* 750px -> 46.875rem */
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;  
}

.grid-gedanken> div {  
    padding: 0.625rem; /* 100px -> 0.625rem */
}

@media(max-width: 37rem){  /* 600px -> 37.5rem */
    .grid-gedanken{
        grid-template-columns: auto;
    } 
 }

 .grid-kontakt{
    max-width: 50rem; /* 800px -> 50rem */
    margin: auto;
    display: grid;
    grid-template-columns: 5fr 7fr;
    justify-content: center;  
}

.grid-kontakt> div {  
    padding: 10px; 
}

@media(max-width: 37.5em){ /* 600px -> 37.5rem */
    .grid-kontakt{
        grid-template-columns: auto;
    } 
 }

.fuss{
    max-width: 37.5rem; /* 600px -> 37.5rem */
    height: auto;
    margin: 0 auto;
}

.grid-fusszeile{ 
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-gap: 1.25rem; /* 20px -> 1.25rem */
    text-align: left;
    padding: 0.313rem;
} 


@media(max-width: 37.5rem){ /* 600px -> 37.5rem */
    .grid-fusszeile { 
       display: grid;
       grid-template-columns: auto auto;  } 
    .grid-fusszeile > div {  
    padding: 0.313rem 2.5rem; /* 5px -> 0.313rem | 400px -> 2.5rem */
    } 
} 


@media(max-width: 31.25rem) /* 500px -> 31.25rem */{ 
    .grid-fusszeile { 
        display: grid;
        grid-template-columns: auto;  
    } 
    .grid-fusszeile > div {  
        padding: 0.313rem 2.5rem; /* 5px -> 0.313rem | 40px -> 2.5rem */
    } 
} 
        

.fusszeile-schrift{  
    color: var(--schrift-color); 
}

.fusszeile-schrift:hover{ 
    color: var(--schrift-color-hover); 
}
     
 /* Gemeinsame Eigenschaften für alle Überschriften */
h1, h2, h3, h4, h5 {
  font-family: var(--schrift);
  color: var(--schrift-color);
  letter-spacing: 0.125rem; /* 2px 0.125rem */
  line-height: 1.3;
}

/* Individuelle Größen */
h1 { font-weight: 500; font-size: clamp(1.56rem, 4vw + 0.625rem, 2.813rem); line-height: 1.1; } /* 25px -> 1.56rem | 45px -> 2.813rem */
h2 { font-weight: 600; font-size: clamp(1.25rem, 3vw + 0.625rem, 2.188rem); } /* 20px -> 1.25rem | 35px -> 2.188rem */
h3 { font-weight: 500; font-size: clamp(1rem, 2.05vw + 0.625rem, 1.375rem); }  /* 16px -> 1rem | 22px -> 1.563rem */
h4 { font-weight: 400; font-size: clamp(1rem, 1.75vw + 0.625rem, 1.25rem); }  /* 16px -> 1rem | 20px -> 1.25rem */
/* wird der mittlere Wert verringert, schrumpft die Schrift schneller */

/* Fließtext-Elemente */
p, li, a {  
  font-family: var(--schrift); 
  color: var(--schrift-color);
  font-weight: 300; 
  letter-spacing: 1px; 
  line-height: 1.6;
  text-decoration: none;
  font-size: clamp(0.938rem, 0.725rem + 0.5vw, 1.063rem);
  /* 15px -> 0.938rem | 17px -> 1.063rem 
  font-size: clamp(1rem, 0.967rem + 0.133vw, 1.125rem); */ 
  text-align: justify;
}



@media(max-width: 35rem) /* 560px -> 35rem */{  
        p{
            text-align: left;
        }
    }

.fett {
    font-weight: 500;
}

.kursiv{
    font-style: italic;
}

.mitte{ 
    text-align: center;
  }