/* START -- "Main" Bereich für die Section der Registrier Karten. */
main
{
  padding-top: 20px;
}

section
{
  display: none;
  padding: 20px 0 0;
  /*border-top: 1px solid #ddd;*/
}

input
{
  display: none;
}

label
{
  display: inline-block;
  margin: 0 0 -1px;
  padding: 10px 20px;
  /*font-weight: 500;*/
  text-align: center;
  color: #5c5b5b;
  border: 1px solid transparent;
}

label:before 
{
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

ul.a 
{
  list-style: disc;
}

ul.a li
{
  color:#ffffff;
  font-size: 16px; /* Beispiel-Schriftgröße */
  line-height: 1.5; /* Beispiel-Zeilenhöhe */
}

label:hover
{
  color: #ffffff;
  cursor: pointer;
}

input:checked + label
{
  color: #ffffff;
  /*border: 1px solid #ddd;*/
  border-top: 2px solid orange;
  /*border-bottom: 1px solid #fff;*/
  text-transform: uppercase;
  /*background-color: var(--third-color);*/
  background-color:#141414;
}

/* Gemeinsame Styles für alle Tabs und Inhalte - Ende */

/* Styles für Tabs und Inhalte - Set A */
#tab1a:checked ~ .content_container_test #content1a,
#tab2a:checked ~ .content_container_test #content2a,
#tab3a:checked ~ .content_container_test #content3a
{
  display: block;
}

/* Styles für Tabs und Inhalte - Set B */
#tab1b:checked ~ .content_container_test #content1b,
#tab2b:checked ~ .content_container_test #content2b,
#tab3b:checked ~ .content_container_test #content3b
{
  display: block;
}

/* Styles für Tabs und Inhalte - Set c */
#tab1c:checked ~ .content_container_test #content1c,
#tab2c:checked ~ .content_container_test #content2c,
#tab3c:checked ~ .content_container_test #content3c
{
  display: block;
}

/* ENDE -- "Main" Bereich für die Section der Registrier Karten. */


.stylebody_content_box
{
  border-left: 1px solid orange;
  border-right: 1px solid orange;
  max-width: 1330px;
  margin: 0 Auto;
  padding-top: 20px;
  padding-bottom: 20px;

}

.stylebody_footer_box
{
  border-left: 1px solid orange;
  border-right: 1px solid orange;
  max-width: 1330px;
  margin: 0 Auto;
  padding-top: 20px;
}

.content_box1
{
  /*border: 1px solid red;*/
  padding-top: 60px;
}

.content_box2_center
{
  /*border: 1px solid red;*/
  /*padding-left: 10%;*/
  /*padding-right: 10%;*/
  justify-content: center;
}

.content_box3_innen
{
  /*border: 1px solid green;*/                  
  max-width: 1330px; 
  border-left: 1px solid #ffa500;
  border-right: 1px solid #ffa500;
  background-color: #141414;
  display: flex;                      /* Flexbox verwenden */
  justify-content: center;            /* Horizontal zentrieren */
  align-items: center;                /* Vertikal zentrieren */
  position: relative;              
  margin: auto;                       /* Hinzugefügt, um das Element horizontal zu zentrieren */
  /*padding-left: 25%;*/
}

.pageinfo_box
{
  /*border: 1px solid yellow;*/
  position: absolute;
  width: 50%;
  margin-left: -686px;
  text-align: center;
}



.content_banner
{ 
  /*border: 1px solid white;*/             
  height: 180px;
  width: 30em;
  max-width: 40em;
  position: relative;
  /*justify-content: center;*/
  /*align-items: center;*/
  /*min-height: 100vh;*/
  Margin-left: 20%;
  padding: 0;
                    /* Maximale Breite des Containers */
  /*padding: 0 auto;*/                /* Auto-Margin links und rechts, um den Container zu zentrieren */
}

.content_banner H2
{
  text-align: center;
  margin: 12%;                        /* Hinzugefügt, um die Standardmargineinstellungen zu entfernen */
}

.header_text_box{
  border: 1px solid orange;
}

/*START - Header design boxen*/

.header_parallelogram_TextBox
{
  
  /*border: 1px solid green;*/
  height: 13em;   
  width: 30%;
  position: relative;
  top: 0;
  margin-left: 1em; /*Schiebt er die Grüne Box,links von der Weißen box weg. */
  
  padding-top: 10em;  
  padding-left: 10em;
  padding-right: 12em;
  padding-bottom: 1em;

  background: transparent;
  z-index: 0;

  color: white;
  &::before 
  {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1em;
    left: 4em;
    z-index: -1;
    background: #000000;
    transform: skew(30deg);
    box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
  }
}


.header_parallelogram_TextBox1
{ 
  position: relative;
  height: 130px;
  width: 114px;
  border: 0;
  /*margin: .6em;*/
  margin-top: -60px;
  margin-left: 227px;
  background: transparent;
  z-index: 0;

  &::before
  {
    content: '';
    border: 1px solid #ffa500;
    position: absolute;
    top: -27px; right: 0; bottom: -48px; left: 0;
    z-index: -1;
    background: #000000;
    transform: skew(30deg);
    box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
  }
}

.header_parallelogram_TextBox2
{
  position: relative;
  height: 130px;
  width: 114px;
  border: 0;
  /*margin: .6em;*/
  margin-top: -181px;
  margin-left: 304px;
  background: transparent;
  z-index: 0;

  &::before 
  {
    content: '';
    border: 1px solid #ffa500;
    position: absolute;
    top: -27px; right: 0; bottom: -48px; left: 0;
    z-index: -1;
    background: #000000;
    transform: skew(30deg);
    box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
  }
}

/*Ende - Header design boxen*/


/* ******START - Media Query für Handy und Tablets ****** */

/* Header design boxen*/
@media screen and (max-width: 1364px) 
{ 
  .content_box3_innen
  { 
    border-left: none;
    border-right: none;
    width: 100%;
    height: 100%;
    padding-left: 25%;
    padding-right: 25%;
  }

  .stylebody_content_box
  {
    border-left: none;
    border-right: none;
  }
  
  .stylebody_footer_box
  {
    border-left: none;
    border-right: none;
  }
  
}

/* Media Queries für kleinere Bildschirme */
@media screen and (max-width: 1000px) 
{
  .content_banner
  { 
    margin-left: -5%;
  }
}

@media screen and (max-width: 860px) 
{
  .content_banner
  { 
    margin-left: -30%;
  }
}

@media screen and (max-width: 800px)
{
  .content_banner
  { 
    margin-left: -35%;
  }

  .header_parallelogram_TextBox
  {
    /*border: 1px solid green;*/  
    margin-left: -1em;
    padding-top: -0.8em;  
    padding-left: 10.2em;
    padding-right: 11em;
    padding-bottom: 0em;
    background: transparent;
    z-index: 0;
    color: white;
    &::before 
    {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: -1em;
      left: 4em;
      z-index: -1;
      background: #000000;
      transform: skew(30deg);
      box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
    }
  }
}
/*ENDE - Header design boxen*/

/*START - Media Querys - Für die Handy Auflösung.*/

@media screen and (max-width: 690px) 
{
  .header_parallelogram_TextBox 
    {
      display: none;
      /*padding-left: 20px;*/ 
    }
  
  .header_parallelogram_TextBox1,
  .header_parallelogram_TextBox2,
  .trapezoid 
    {
      display: block;
      
    }

  .pageinfo_box
  {
    text-align: center;
    margin: 0;
  }
}



@media screen and (max-width: 768px) {

  ul.a li {
    font-size: 14px; /* Reduziere die Schriftgröße für Listenpunkte */
    line-height: 150%; /* Verringere die Zeilenhöhe für Listenpunkte */
  }

  label {
    font-size: 14px; /* Reduziere die Schriftgröße für Labels */
    padding: 10px; /* Verringere den Abstand für Labels */
  }
}

@media screen and (max-width: 650px) {
  label {
    font-size: 14px;
  }

  label:before {
    margin: 0;
    font-size: 18px;
  }

  label[for="tab1"]:before,
  label[for="tab2"]:before,
  label[for="tab3"]:before {
    font-size: 18px; /* Passe die Größe der Icons für kleinere Bildschirmgrößen an */
  }
  
  /*Hier werden die Font Awesome Icons bei der handy auflösung wieder dargestellt*/
  .fa-gears {
    display: inline-block; /* Stelle sicher, dass das Icon inline-block ist */
    font-size: 14px; /* Passe die Größe des Icons an */
  }

  .fa-clipboard-check {
    display: inline-block; /* Stelle sicher, dass das Icon inline-block ist */
    font-size: 14px; /* Passe die Größe des Icons an */
  }

  .fa-list-check {
    display: inline-block; /* Stelle sicher, dass das Icon inline-block ist */
    font-size: 14px; /* Passe die Größe des Icons an */
  }
  
}

/* Responsive Design für Handys */
@media screen and (max-width: 480px) {
  ul.a li {
    font-size: 12px; /* Reduziere die Schriftgröße für Listenpunkte */
    line-height: 140%; /* Verringere die Zeilenhöhe für Listenpunkte */
  }

  label {
    font-size: 12px; /* Reduziere die Schriftgröße für Labels */
    padding: 8px; /* Verringere den Abstand für Labels */
  }

}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
    font-size: 0;
    
  }

  label:before {
 
    font-size: 0;
  }

  label[for="tab1"]:before,
  label[for="tab2"]:before,
  label[for="tab3"]:before {
    font-size: 15px; /* Passe die Größe der Icons für kleinere Bildschirmgrößen an */
  }

    /*Hier werden die Font Awesome Icons bei der handy auflösung wieder dargestellt*/
    .fa-gears {
      display: inline-block; /* Stelle sicher, dass das Icon inline-block ist */
      font-size: 14px; /* Passe die Größe des Icons an */
    }
  
    .fa-clipboard-check {
      display: inline-block; /* Stelle sicher, dass das Icon inline-block ist */
      font-size: 14px; /* Passe die Größe des Icons an */
    }
  
    .fa-list-check {
      display: inline-block; /* Stelle sicher, dass das Icon inline-block ist */
      font-size: 14px; /* Passe die Größe des Icons an */
    }


}

/*ENDE - Media Query - Für die Handy Auflösung.*/