:root{  
        
        --schrift-color1: rgb(236, 236, 234);
        --schrift-color2: rgb(228, 228, 208);
        --schrift-color3: rgb(209, 209, 164);
  
        --background: rgba(0, 0, 0, 1); 
        --eingabefeld: #2b2b2b;  
        --senden: #293547; 
        --error: rgb(248, 0, 0);
       
      --schrift2: 'Source Serif 4', serif;

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

} 
       
 * {
      box-sizing: border-box;
    }

  img, video { 
      max-width: 100%;
           }
    
    body {
      background: var(--background);
      margin: auto;
      padding: 15px;
      hyphens: auto;
    }

    .container {
      max-width: 700px;
      margin: auto;
      padding: 10px;
    }
   
  /* Der Container für alle Einträge */
  .liste-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* <--- HIER den Abstand zwischen den Zeilen ändern! */
    max-width: 800px;
  }

  /* Grundstyling für den gesamten Link-Eintrag */
.eintrag {
  display: flex;
  align-items: center; 
  text-decoration: none; 
  color: var(--schrift-color2);
  margin-bottom: 30px; 
}

/* Styling für den Container, in dem der Punkt liegt */
.eintrag .icon {
  display: flex; /* Erlaubt das Zentrieren des Punkts */
  justify-content: center;
  align-items: center;
  width: 20px; /* Reservierter Platz für den Punkt (Breite) */
  margin-right: 15px; /* Abstand zum Textinhalt */
  flex-shrink: 0; /* Verhindert das Quetschen bei Platzmangel */
}

/* Erzeugt den eigentlichen CSS-Punkt (Kreis) */
.eintrag .icon::before {
  content: "";
  display: block;
  width: 12px; /* Durchmesser des Punkts */
  height: 12px;
  background-color: var(--schrift-color2); 
  border-radius: 50%; 
}

.text-inhalt h2 {
    margin: 0;
    font-size: clamp(14px, 2.5vw, 18px);
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: 1px;
  }

  .text-inhalt p {
    margin: 2px 0 0 0; 
    color: var(--schrift-color3);
  }
    
   a{
    text-decoration: none;
    color: var(--schrift-color3);
   } 

   a:hover{
    color: var(--schrift-color2);
   }
    
    h1{
      font-family: var(--schrift2);
      font-size: clamp(16px, 3vw, 25px);
      font-weight: 500;
      letter-spacing: 2px;
      color: var(--schrift-color2);
      font-style: italic;
    }

    h2{
      font-family: var(--schrift2);
      font-size: clamp(18px, 5vw, 22px);
      font-weight: 300;
      letter-spacing: 1px;
      color: var(--schrift-color1);
      font-style: italic;
    }

    p{
      font-family: var(--schrift);
      color: var(--schrift-color1);
      font-size: 16px;
      font-weight: 300;
      font-style: italic;
      letter-spacing: 2px;
      line-height: 28px; 
      text-align: justify;   
    }

    .schrift2{
      color: var(--schrift-color2);
    }

    .nachoben{
      margin-top: -24px;
      font-family: var(--schrift);
      color: var(--schrift-color3);
      padding-left: 35px;
      font-size: 14px;
    }

  .n-oben{
      margin-top: -15px;
      font-family: var(--schrift);
      color: var(--schrift-color3);
      padding-left: 10px;
      font-size: 14px;
      line-height: 15px;
    }
  
    
    .fusszeile{
     max-width: 800px;
     margin: auto;
     padding: 0 10px;
     font-family: var(--schrift);
     text-align: center;
    }

    hr{
      color: var(--schrift-color3);
    }


#closeButton {
    display: none; /* Initial versteckt */
    position: fixed; 
    bottom: 50px;               
    right: 30px;          
    padding: 8px 20px;  
    font-size: 14px; 
    color: var(--schrift-color2); 
    background-color: var(--eingabefeld); 
    border: thin solid var(--error);   
    border-radius: 2px;       
    cursor: pointer;  
    z-index: 9999; 
}
/* --- ende seite schließen --- */

.form-group label {
    display: block;
    color: var(--schrift-color2);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

#name, #email, #subject, #message, #captcha, #senden {
    color: var(--schrift-color2);
    font-size: 14px;
    letter-spacing: 2px;
}


    /* --- Mobile-Button-Reset (ERWEITERT) --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Verhindert iOS-spezifische Effekte */
    -webkit-tap-highlight-color: transparent; /* entfernt blauen Tap-Effekt */
    -webkit-touch-callout: none; /* verhindert Kontext-Menü */
    
    /* Erzwingt konsistente Darstellung */
    background-image: none; /* entfernt Gradient */
    box-shadow: none;
    text-decoration: none;
    
    /* Font-Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Verhindert Zoom bei Focus (iOS) */
    touch-action: manipulation;
}

/* --- Button-Verhalten beim Hover --- */
#closeButton:hover {
    background-color: var(--senden);
}

/* --- Mobile-spezifische Anpassungen --- */
@media (hover: none) and (pointer: coarse) {
    #closeButton {
        /* Optional: leicht größerer Touch-Bereich auf Mobile */
        min-height: 44px; /* Apple empfiehlt min. 44px für Touch-Targets */
        min-width: 44px;
    }
}

/* --- Active-State für Touch-Feedback --- */
#closeButton:active {
    background-color: var(--senden);
    opacity: 0.95;
}