/* Farbvariablen */
/* Bsp.  background-color: var(--background-color);    */
 
 :root{
  --font-color: rgb(125, 53, 3);
  --background-color: red;
  --background-senden-color: rgb(205, 165, 165);
  --background-textbox-color: rgb(241, 223, 206);
  --font-color-light: rgba(204, 135, 70, 0.749);
  --border-color: black;
}


* {
  /* outline: 1px solid red !important;  */
  font-family: "Open Sans", sans-serif;
  margin-top: 0;
}

body {
   display: flex;
   justify-content: center;
  height: 100vh; /* Höhe des Anzeigebereichs*/
  /* margin: 48px;  /* Abstand rundherum */ 
  background: linear-gradient( /* diagonaler Hintergrund-Farbverlauf */
    90deg,    rgba(245, 213, 179, 1) 0%,    rgba(148, 115, 95, 1) 100%);
  color: var(--font-color); 
}

footer {
  text-align: center;
  box-sizing: border-box;
  /* width: 100%; */
  padding-top: 15px;
  background-color: var(--background-textbox-color); 
  color: var(--font-color-light);
}

/* *************** HEADER *************** */ 

header { 
  /* outline: 2px solid rgba(255, 0, 208, 0.852); */
  position: sticky;
  padding: 20px;
  top: 0;
  /* height: 200px; */
  /* width: 1080px; */
  background-color: var(--background-textbox-color); /* Hintergrundfarbe */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1; /* Reihenfolge der Darstellung */
  gap: 1em; /* Abstand 1 Schriftgrösse */
}

header a { 
  color: var(--font-color-light); /* Schriftfarbe */
  font-size: 1.3em;
}

header input[type="checkbox"]{ /* betroffen: Input-Typ Checkbox */ 
display: none;  /* Anzeige -> ausblenden */
}

header menu { 
  height: 100%; /*200px;*/
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
  gap: 0.5em 2em; /* Abstand Schrifthöhe Zeile 0.5x Spalte 2x */
  padding-inline-start: 0;
}

.toggle_button { /* header */

  width: 30px;
  gap: 5px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.bar { /* header */
  height: 4px;
  width: 100%;
  background: var(--font-color-light);
  border-radius: 100px;
}


/* *************** // *************** */  

div.gesamtcontainer { 
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  width: 95vw;
  gap: 30px;
}

div.textbox { /* lebenslauf.php / berufserfahrung.php / weiterbildungen.php / kontakt.php / wissenswertes.php */
  box-sizing: border-box;
  padding: 20px;
  /* width: 100%; */
  background-color: var(--background-textbox-color); 
}



/* *************** LEBENSLAUF *************** */ 

div.rotate_right { /* lebenslauf.php */
  float: right;
  transform: rotate(7deg);
}

h4 { /* lebenslauf.php */
  color: var(--font-color); 
}


img.family { /* lebenslauf.php */
  margin: 20px;
  display: block;
  margin-left: auto;
}

img.pillow { /* lebenslauf.php */
  box-shadow: 3px 3px 20px 11px rgba(226, 220, 214, 0.749);
  /* Ausrichtung vertikal und horizontal, Unschärfe, Ausbreitungsradius, Farbe */
  float: right;
  margin: 20px;
}

.reference { /* lebenslauf.php */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; 
  text-shadow: 1px 1px 2px peru;
}

.text_klein { /* lebenslauf.php */
  font-size: smaller;
}


/* *************** AKTUELL *************** */ 

.gesamtslide {
padding: 20px;
}


.indikatorenliste { /* aktuell.php */
  position: absolute;
  top: 0; /* Abstand vom oberen Rand */
  left: 0; /* Erstreckung über die gesamte Breite von links... */
  right: 0; /* ...nach rechts */
  list-style-type: none; /* Zahlen der geordneten Liste nicht anzeigen */
  color: rgba(0, 0, 0); /* 0.5-> weiss transparent */
  font-size: 30px; /* Schriftgrösse*/
  display: flex; /* Flexbox erstellen */
  justify-content: center; /* horizontal zentrieren*/
  padding: 0; /* kein Abstand innerhalb der Liste */
  margin: 0; /* kein Abstand ausserhalb der Liste */
}

.indikator { /* aktuell.php */
  padding: 0 3px; /* Abstand im Bereich des anklickbaren Bereichs*/
  user-select: none; /* Zeichen ist nicht auswählbar */
  cursor: pointer; /* Darstellung des Mauszeigers */
  opacity: 0.5; /* Deckkraft */
  transition: opacity 2s; /* Dauer der Änderung eines Wertes */
}


.pfeil { /* aktuell.php */
  position: absolute; /*  */
  font-size: 30px; /* (Pfeil-) Schriftgrösse */
  top: 0; /* vom Rand aus starten */
  bottom: 0; /* vom Rand aus starten */
  display: flex; /* Flexbox erstellen */
  justify-content: center; /* horizontal zentrieren */
  align-items: center; /* vertikal zentrieren */
  width: 15%; /* Breite in % vom ganzen Boxinhalt  */
  color: rgba(255, 255, 255, 0.5); /* 0.5 = halbtransparent */
  user-select: none; /* Zeichen nicht auswählbar */
  cursor: pointer; /* Cursoranzeige klickbar anzeigen */
}

.pfeil:hover { /* aktuell.php */
  /*  Wenn mit der Maus darübergefahren wird */
  color: white;
  text-decoration: none; /* Link soll nicht unterstrichen angezeigt werden */
}

.pfeil-links { /* aktuell.php */
  left: 0; /* Abstand von links */
}

.pfeil-rechts { /* aktuell.php */
  right: 0; /* Abstand von rechts */
}

.slideshow { /* aktuell.php */
  /* width: 540px; */
  /* width: 50vw; Hälfte der Anzeigebreite */
  height: 70vh; /* Hälfte der Anzeigehöhe */
      /* max-width: 1080px; */
  position: relative; /* Position nicht an der ganzen Seite*/
}

.slide { /* aktuell.php */
  /* background-color: rgb(255, 127, 238); */
  top: 0; /* Abstand vom oberen Rand */
  right: 0; /* Abstand vom rechten Rand */
  bottom: 0; /* Abstand vom unteren Rand */
  left: 0; /* Abstand vom linken Rand */
  position: absolute; /* Position richtet sich am Inhalt, nicht an der ganzen Seite*/
  opacity: 0; /* Transparenz 100% d.h. ausblenden */
  transition: opacity 2s; /* Dauer der Änderung eines Wertes */
}

.slide-bild { /* aktuell.php */
  width: 100%;
  height: 100%;
  position: relative; /* Position relativ zum Elternteil (absolut) */
  object-fit: cover; /*contain füllt nicht ganz aus */
  aspect-ratio: 4/3;
}

.aktiv { /* aktuell.php */
  opacity: 1 !important; /* Deckkraft */
}



/* *************** BERUFSERFAHRUNG *************** */ 




/* *************** WEITERBILDUNGEN *************** */ 

.fett { /* weiterbildungen.php */
font-weight:bold ;

}
.kursiv { /* weiterbildungen.php */
font-style:italic ;
}



/* *************** KONTAKT *************** */ 

button { /* kontakt.php */
color: var(--background-textbox-color); 
background-color: var(--font-color); 
margin-top: 18px;
padding: 15px;
font-size: 16px;
border:#777;
border-radius: 20px;
cursor: pointer;
}

div.textbox-form { /* kontakt.php */
  text-align: center;
}


.input-field { /* kontakt.php */
  width: 400px;
  height: 40px;
  margin-top: 5px;  /*  innerer Abstand oben */
  margin-bottom: 20px; /*  innerer Abstand unten */
  padding: 0 10px 0 10px; /*  Abstand rechts und links */
  border: 1px solid #777; /* Rahmendicke, -art, -farbe */
  border-radius: 14px; /* Rahmenumrandung */
  outline: none; 
  font-size: medium;
}

.input-label{ /* kontakt.php */
/* padding-top: 20px;  Abstand oben */
font-size: large;
text-align: left; /* Schrift nicht linksbündig, warum? */
}

.textarea-field{ /* kontakt.php */
  height: 200px;
  padding: 10px;
}

/* ****************************** */ 


a:hover {
  text-decoration: underline;
  color: rgba(201, 116, 36, 0.984);
}

a:link {
  text-decoration: none;
}
/* 
a.senden {
  border: 1px solid;
  border-color: rgb(199, 10, 10);
  background-color: var(--background-senden-color);
  padding: 5px;
  text-decoration: none;
}

a.senden:hover {
  border: 1px solid;
  border-color: var(--border-color);
  background-color: var(--background-senden-color);
  padding: 5px;
  text-decoration: underline;
}

a.senden:visited {
  border: 1px solid;
  border-color: var(--border-color);
  background-color: var(--background-senden-color);
  color: var(--background-color);
  padding: 5px;
  text-decoration: underline;
} */



/* *************** MEDIA *************** */ 


  @media (max-width: 1000px) {
     
    .toggle_button{    
      display: flex;
    } 

    header {
      flex-direction: column;
    }

    header menu {
      flex-direction: column;
      display: none;
    }
  
    #toggle_button:checked ~ menu{
      display: flex;
    }

    #toggle_button:checked ~ .baroben{
      transform: rotate(45deg); /* ?? */
      background: red;

   } 

  }

  @media (max-width: 500px) {
     
    div.gesamtcontainer {
      width: 98vw;
    }

    .input-field {
      width: 300px;
    }

  }