/*  ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 

    forms.css  
    wird in style.css per @import eingebunden  

    Stylesheet zur Gestaltung der Interaktion mit dem Benutzer 
    - Abschnitt mit Kontaktdaten 
    - Kontaktformular 
    - Media Query für mehrspaltiges Layout ab 600px 
    
    ======================================= */
    
/** 
  * Kontaktdaten 
  */ 

/* Abschnitt gestalten */
.kontaktdaten {
  background: var(--grey-very-light, whitesmoke);
  color: var(--color-base-dark, black); 

  padding: 1rem;
  border-radius: 0.25rem; 
  margin-bottom: 2rem;
}


/** 
* Kontaktformular 
*/ 

/* Beschriftung der Formularfelder */
/* ALLE Beschriftungen (auch DSGVO) */
.kontaktformular label { 
  /* Mauszeiger als "Klickhand", wie bei einem Hyperlink */
  cursor: pointer;
}
/* nur Beschriftungen vor den Eingabefeldern */
.kontaktformular form > label { 
  /* als Block = auf einer eigenen Zeile */
  display: block; 
}

/* Abstände zwischen den Zeilen im Formular (Media Query = nur im mobilen Layout */
@media screen and (max-width: 599.99px) {
  .kontaktformular  form > input,
  .kontaktformular  form > textarea,
  .kontaktformular  form > div { 
    margin-bottom: 1rem; 
  }
} /* Ende @media */ 

/* Eingabefelder gestalten */ 
.kontaktformular input[type="text"], 
.kontaktformular input[type="email"], 
.kontaktformular textarea {
  /* Vererbung von Schriftart und -größe erzwingen */
  font-size: inherit;
  font-family: inherit;

  /* Optional: Benutzereingaben in einer anderen Farbe darstellen */
  /* color: var(--color-primary);  */

  /* Alle Eingabefelder gleich breit  */
  min-width: 18rem;

  /* etwas Platz zwischen Benutzereingabe und Rahmenlinie  */
  padding: 0.5rem;
  
  /* Rahmenlinien der Eingabefelder */
  border: 1px solid var(--grey-dark, #666);
  border-radius: 0.25rem;
}

/* Eingabefelder mit Hintergrundfarbe, wenn sie ausgefüllt werden */
.kontaktformular input[type="text"]:focus, 
.kontaktformular input[type="email"]:focus, 
.kontaktformular textarea:focus {
  background-color: var(--grey-very-light, whitesmoke);
  color: var(--color-base-dark, black); 
}

/* <textarea> - Breite begrenzen und Mindesthöhe definieren */ 
.kontaktformular textarea {
  max-width: 30rem; 
  min-height: 8rem;
}

/* DSGVO - Schrift etwas kleiner */
.kontaktformular .dsgvo-text { font-size: smaller; }

/* Button zum Absenden der Formulardaten */
.kontaktformular button {
  /* Vererbung von Schriftart und -größe erzwingen */
  font-size: inherit; 
  font-family: inherit; 

  /* Beschriftung zentrieren */
  text-align: center;

  /* Box gestalten */
  background: var(--color-primary, #07b);
  color: var(--color-base-light, white); 

  min-width: 18rem; 
  padding: 1rem;
  border: none; 
  border-radius: 0.25rem;
  
  /* Mauszeiger als "Klickhand", wie bei einem Hyperlink */
  cursor: pointer;
}

/* Button beim Hovern oder bei Aktivierung per Tastatur farblich hervorheben */
.kontaktformular button:hover, 
.kontaktformular button:focus {
  background: var(--color-accent, #f63);
}
.kontaktformular button:active {
  background: var(--color-accent-active, #ec3); 
}

  /** 
    * Mehrspaltiges Layout für Kontaktformular und -daten 
    * display: grid  
    * 
    */

@media screen and (min-width: 600px) {

  /* Kontaktdaten und -formular - wie auf der Seite News */ 
  .seite-kontakt .site-content > .inside {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    grid-column-gap: 3rem; 
    grid-row-gap: 1rem; 
    grid-template-areas: 
    "intro intro"
    "kontaktformular kontaktdaten"; 
  }

  .seite-kontakt .content-intro { grid-area: intro; }
  
  /* Kontaktdaten und -formular platzieren (Reihenfolge anders als im HTML) */
  .seite-kontakt .kontaktdaten { grid-area: kontaktdaten; margin-bottom: 0; } 
  .seite-kontakt .kontaktformular { grid-area: kontaktformular; } 


  /* Layout für das Kontaktformular */ 
    .kontaktformular form {
      display: grid;
      grid-template-columns: 7rem 1fr;
      gap: 1rem; 

      /* Optional: Beschriftung auf der Grundlinie für Text ausrichten */
      align-items: baseline;
    }

    .kontaktformular form > label {
      text-align: right;
    }

    .kontaktformular button {
      grid-column: 1/-1;

      /* Optional: Button in der zweiten Spalte */
      /* grid-column: 2; */

    }


} /* Ende @media */ 


/** 
  * Ende forms.css 
  */