/** ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 
 
    forms.css  
    wird in style.css per @import eingebunden  
 
    ======================================= */


/* Grundlegende Gestaltung der Inhalte auf der Seite Kontakt */

 .kontaktdaten {
     display: flex;
     justify-content: space-between;
     width: 100%;
     flex-wrap: wrap;
     justify-content:;

  }
 .kontaktdaten:nth-child(2)  {

 }

.kontaktformular form {
    max-width: 45rem;
    background-color: var(--grau-sehr-hell);
    padding: 1rem; 
    margin-bottom: 3rem;
  }
  
  .kontaktformular div {
    margin-bottom: 1rem; 
  }
  
  .kontaktformular label { 
    cursor: pointer; 
    display: block; 
  }      
  
  .kontaktformular input[type="checkbox"] + label {
    display: inline;
  }
  
  .kontaktformular button {
    font-size: inherit; 
    font-family: inherit;
    cursor: pointer;
    background-color: var(--akzentfarbe);
    color: var(--basisfarbe);
    border: none;
    padding: 0.5rem;
    width: 100%; /* Macht den Button so breit wie das umgebende Element */
    border-radius: 10px; /* Abrundung der Ecken, hier 10px, kann angepasst werden */
  }

  @media screen and (max-width: 599px) {
  .text-feld {
      height: 30px;
      width: 300px;
      max-width: 70%;
  }

   .text-feld-area {
      height: 100px;
      width: 300px;
      max-width: 70%;
  }
  }

  @media screen and (min-width: 600px) {
  .text-feld {
      height: 30px;
      width: 400px;
      max-width: 70%;
  }

   .text-feld-area {
      height: 140px;
      width: 400px;
      max-width: 70%;
  }
  }
   /* iframe für google maps  */

  .iframecontainer {
  position: relative;
  width: 90%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.thanks {
    margin-bottom: 30rem;
}
.button_artsy {
    text-align: center;
    margin: 1rem;
}

.button_black {
  font-size: 1.0rem;
  letter-spacing: 0.1rem;
  width: 95%; /* Macht den Button so breit wie das umgebende Element */
  border-radius: 10px; /* Abrundung der Ecken, hier 10px, kann angepasst werden */
  background-color: black; /* Schwarzer Hintergrund */
  color: white; /* Weiße Schriftfarbe, damit sie auf dem schwarzen Hintergrund lesbar ist */
  padding: 0.5rem;
  border: none; /* Entfernt den Standardrahmen */
  cursor: pointer; /* Zeigt an, dass der Button interaktiv ist */
}

.button_white {
  font-size: 1.0rem;
  letter-spacing: 0.1rem;
  width: 95%; /* Macht den Button so breit wie das umgebende Element */
  border-radius: 10px; /* Abrundung der Ecken, hier 10px, kann angepasst werden */
  background-color: white; /* Schwarzer Hintergrund */
  color: black; /* Weiße Schriftfarbe, damit sie auf dem schwarzen Hintergrund lesbar ist */
  padding: 0.5rem;
  border: solid 1px black; /* Entfernt den Standardrahmen */
  cursor: pointer; /* Zeigt an, dass der Button interaktiv ist */
}

.besuchervorname {
    visibility: hidden;
}

  /* Ende forms.css */