/* 
Thema:              CSS / Vorlage
Autor:              publiccom GmbH / Große Wollweberstraße 20 / 17033 Neubrandenburg
Author URI:         https://www.publiccom.de/
Erstellung:         12.12.2022
Projektname:        Developer Akademie / Teachable / Kochwelt
Zuständigkeit:      Raphaela Multhaup (RM) / Helmut Martens (HM) / Thomas Dehmelt (TD)
Aktualisierung:     12.10.2023
*/



/*
NOTIZEN
  Displaygrößen:
    Handy / hochkant    <= 576px
    Handy / querformat  >= 767px
    Tablet / hochkant   <= 767px
    Tablet / querformat >= 1023px
    Desktop / ab        >= 1024px
  Angaben:
    100vh   = 100% der realen Bildschirmhöhe
    20vw    = 20% der realen Bildschirmbreite
    20px    = 20px > unflexibel im responsive Design, also sparen
    1rem    = 1rem = 100% der Schrifthöhe, der Stärksten Angaben (also body) | wenn body 20px, dass ist 1rem 20px
    90deg   = drehe dich um 90 Grad, ausgehend vom Mutterelement
    25%     = nimm 25%, ausgehend vom Mutterelement
*/



/* ### Projektfarben ### pblc ### 12.10.2023 ### Klasse nicht verwenden! | maximal 3 Farben verwenden zzgl. "#ffffff"
### Farben immer als HexCode im ganzen verwenden also nicht #fff, sondern #ffffff ### */
.ProjektFarben {
  color: #008000;                               /* 100% */
  color: #333333;                               /* 100% */
  color: #efefef;                               /* 100% */  
  color: #00800070;                             /* 70% */
  color: #00800050;                             /* 50% */
  color: #00800020;                             /* 20% */
  color: #FF0000;                               /* Fehler */
  color: #2e9e2e;                               /* KeinFehler */  
}



/* ### HTML&BODY ### pblc ### 12.10.2023 ### */
html {
  scroll-behavior: smooth;                        /* langsames Scrollen zu einer ID beispielsweise durch ein <a>, wenn Element sich auf gleicher Seite befindet */ 
}



body {
  font-family: 'Raleway', sans-serif;             /* Standart Schriftart der Seite */
  font-size: 16px;                                /* Standart Schriftgröße der Seite */
  margin: 0px;                                    /* Standart Abstand der Seite */
  max-width: 100vw;                               /* maximale Breite der Seite (eine Bildschirmbreite) */
  overflow-x: hidden;                             /* verhindert, dass die Elemente über die maximale Breite der Seite gehen */
  color: #333333!important;                     /* Standart Schriftfarbe der Seite */
  background-color:#ffffff;                     /* Standart Hintergrundfarbe der Seite */
  position:relative;
  display: flex;                                  /* Anordnung der Seite... */
  flex-direction: column;                         /* ...untereinander */
  /* word-break: break-all;*/                          /* Text Umbrechen um sich maximaler Breite anzupassen */
  padding: 0!important;
  margin: 0!important;
}
@media (min-width: 0px) and (max-width: 1023px) {    /* Manipulieren von Elementen und Klassen, wenn Displayspanne xy */
  body {
    font-size: 14px;
  }
}



.displaystretch {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  min-height: calc(100vh - 244px);
  overflow-x: hidden;                             /* verhindert, dass die Elemente über die maximale Breite der Seite gehen */
}



/* ### Scrollbalken rechts ### pblc ### 12.10.2023 ### nicht bei jedem Browser akzeptiert ### */
/* Für Firefox */
* {
  box-sizing: border-box;                         /* ...untereinander */
  scrollbar-color: #008000 #ffffff;           /* Scrollbalken Hintergrung */
  scrollbar-width: 2px;
  -ms-overflow-style: none;
}
/* Für Webkit-basierte Browser wie Chrome und Safari */
*::-webkit-scrollbar {
  width: 1rem;                                    /* Breite des Scrollbalkens */
}
*::-webkit-scrollbar-track {                        /* Scrollbalken (hoch & runter) */
  background: #008000;                          /* Farbe des Scrollbalken-Daumens (der bewegliche Teil) */
}
*::-webkit-scrollbar-thumb {
  background: #ffffff;                          /* Farbe des Scrollbalken-Tracks (der nicht bewegliche Teil) */
  border: 2px;
  border-radius: 0rem;                            /* Abrundung des Scrollbalken-Daumens */
}
::-moz-selection {
  background-color: #008000;
  color: #ffffff;
}



/* ### Markieren von Texten ### */
::selection {
  background-color: #008000;
  color: #ffffff;
}



/* ### Allgemeines für Elemente ### pblc ### 12.10.2023 ### */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0 0 2rem 0;
  line-height: 1.5;
  font-weight: 600;
}
h1 {
  color:#333333;
  font-size: 2rem;
  /*font-weight: 900;*/
}
h2 {
  color:#333333;
  font-size: 1.8rem;
  /*font-weight: 850;*/
}
h3 {
  color:#333333;
  font-size: 1.6rem;
  /*font-weight: 800;*/
}
h4 {
  color:#333333;
  font-size: 1.4rem;
  /*font-weight: 750;*/
}
h5 {
  color:#333333;
  font-size: 1.2rem;
  /*font-weight: 700;*/
}
h6 {
  color:#333333;
  font-size: 1.1rem;
  /*font-weight: 650;*/
}
@media (min-width: 0px) and (max-width: 767px) {
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    color:#333333;
    font-size: 1.4rem;
  }
  h3 {
    color:#333333;
    font-size: 1.3rem;
  }
  h4 {
    color:#333333;
    font-size: 1.2rem;
  }
  h5 {
    color:#333333;
    font-size: 1.15rem;
  }
  h6 {
    color:#333333;
    font-size: 1.1rem;
  }
}



p {
  font-size: 1rem;
  margin: 0px;
  padding: 0 0 1rem 0;
  line-height: 1.5;
  text-decoration: none;
  font-weight: 350;
}



.grossbuchstaben {
  text-transform: uppercase;                      /* Alle Buschstaben sollen großgeschrieben werden */
}



b, strong {
  font-weight: 500;
  color: #333333;
}


@media (min-width: 0px) and (max-width: 767px) {
  .broke {
    word-break: break-all;
  }
}




ul, ol, li {
  font-size: 1rem;
  margin: 0px;
  padding: 0 0 1rem 0;
  line-height: 1.5;
  text-decoration: none;
  font-weight: 350;
  color: #333333;
  padding-left: 1rem;
}



a {                                                 /* Standart Link */
  text-decoration: none;
  color: #008000;
  transition: all 0.3s;
  outline: none !important;
  cursor: pointer;
}
a:hover, a:focus {
  text-decoration: none;
  color: #008000;
  /*font-weight: bold;*/
  transition: all 0.3s;
  outline:none !important;
  cursor: pointer;
}
.Link {                                                 /* Links mit Effekt */
  margin-left: 1rem;
  color: #008000;
  font-size: 1.2rem;
  font-weight: 500;
  position: relative;
  text-decoration: none !important;
  transition: all .3s;
  padding-bottom: 0rem;
}
.Link::after {                                           /* Links mit Effekt */
  content: "";
  background-color: #008000;
  height: 2px;
  width: 10%;
  position: absolute;
  display: block;
  bottom: -0.5rem;
  left: 45%;
  transition: all .3s;
}
.Link:hover::after {                                     /* Links mit Effekt */
  width: 100%;
  transition: all .3s;
  left: 0%;
}

Button {
  background-color: #008000;
  border-radius: 0;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  margin: 0;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1rem;
  line-height: 1;
}
button:focus, button:hover {
  outline:none;
  background-color: #008000;
  color: #ffffff;
}



svg {
width: 100%; 
height: auto;
}



input {
  color: #333333;
  font-family: 'Raleway', sans-serif;             /* Standart Schriftart der Seite */
  font-size: 1rem;
  border: 0px;
  border-bottom: 2px solid #008000;
  transition: all 0.3s;
  margin: 0px;
  padding: 0.8rem 0 0.8rem 2rem;
  line-height: 1;
  text-decoration: none;
}
*:focus:not(:focus-visible) {
  outline: none;
  background-color: #ffffff;
  transition: all 0.3s;
}
*:focus-visible {
  outline: 2px solid #008000;
  outline-offset: -2px;
  background-color: #ffffff;
  transition: all 0.3s;
}
textarea {
  color: #333333;
  font-family: 'Raleway', sans-serif;             /* Standart Schriftart der Seite */
  font-size: 1rem;
  border: 0px;
  border-bottom: 2px solid #008000;
  transition: all 0.3s;
  margin: 0px;
  padding: 0.8rem 0 0.8rem 2rem;
  line-height: 1;
  text-decoration: none;
  resize: vertical;                                /* erlauben, das Input-Textfelder (beispielsweise "Ihre Nachricht") in der Höhe vom User geändert werden dürfen */
}
select {
  color: #333333;
  font-size: 1rem;
  border: 0px;
  border-bottom: 2px solid #008000;
  transition: all 0.3s;
  background-color: #ffffff;
}
option {
  background-color: #ffffff;
}



nav {
border-radius:0 !important;
margin:0 !important;
}



iframe {
display:block;
width:100%;
height:500px;
border:1px solid #008000;
}



/* Tabellen */
table {
  width: 100%;
  border-spacing: 0;
}
table tr {
  line-height: 1.5;
}




/* Gehe in die Tabelle > bearbeite jedes zweite tr > bearbeite jedes td im tr*/
/* table tr:nth-child(odd) td {
  background-color: #efefef;
} */
/* Gehe in die Tabelle > bearbeite jedes tr > bearbeite jedes erste td im tr*/
table tr td:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
  white-space: nowrap;
  padding-left: 0.5rem;
  text-align: start;
}
table tr td:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
  width: 100%;
  padding-left: 0.5rem;
  text-align: start;
}



/*img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}*/




/* ### Allgemeine Klassen zur Umsetzung ### pblc ### 12.10.2023 ### */
.Fehler {
  color: #FF0000;                               /*Schriftfarbe bei Fehlermeldung | bspw. Kontaktformular */
}
.KeinFehler {
  color: #2e9e2e;                               /*Schriftfarbe wen korrekt, also keine Fehlermeldung | bspw. Kontaktformular */
}




@media (min-width: 0px) and (max-width: 1023px) {
  .mobil-Einblenden {                             /* Dinge, die nur auf dem Handy und Tablet zu sehen sein sollen */
      display: flex;
  }
  .mobil-Ausblenden {                             /* Dinge, die nicht auf dem Handy und Tablet zu sehen sein sollen */
      display: none;
  }
  .mobil-center {
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .mobil-Einblenden {
      display: none;
  }
  .mobil-Ausblenden {
      display: flex;
  }
}



.NeuerBereich {                                           /* Wenn Mutter Container fertig ist */
  position: relative;
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  padding: 5rem 5%;
  margin: 0%;
  width: 100%;
  height: auto;
  z-index: 0;
  transition: all 0.3s;
  overflow: hidden;
}



.platzhalter {                                          /* Testabstand */
  width: 100%;
  padding: 5rem 10%;
  font-weight: 900;
  background-color: #008000;
  color: #ffffff;
}



/* ### Flexboxsystem ### */
.flexbox0, .flexbox1, .flexbox2, .flexbox3, .flexbox4,
.flex0, .flex10, .flex20, .flex30, .flex40, .flex50, .flex60, .flex70, .flex80, .flex90, .flex100 {
  height: auto;
}
.flexbox0, .flexbox1, .flexbox2, .flexbox3, .flexbox4 {
  max-width: 100%;
  flex-wrap: wrap;
  display: flex;
}
.flexbox0 {
  justify-content: start;
}
.flexbox1 {
  justify-content: center;
}
.flexbox2 {
  justify-content:space-evenly;
}
.flexbox3 {
  justify-content: space-between; 
}
.flexbox4 {
  justify-content: space-around;
}
.flex10 {
  width: 10%;
}
.flex20 {
  width: 20%;
}
.flex24 {
  width: 24%;
}
.flex30 {
  width: 30%;
}
.flex40 {
  width: 40%;
}
.flex50 {
  width: 50%;
}
.flex60 {
  width: 60%;
}
.flex70 {
  width: 70%;
}
.flex80 {
  width: 80%;
}
.flex90 {
  width: 90%;
}
.flex100 {
  width: 100%;
}
@media (max-width: 1023px) {
  .flex10, .flex20, .flex30, .flex40, .flex50, .flex60, .flex70, .flex80, .flex90  {
      width: 100%!important;
  }
}



/* ### Lexikon für Klassen ### pblc ### 12.10.2023 ### */
.Lexikon_der_Eigenschaften_in_Klassen {
  scroll-behavior: smooth;                        /* im Body-tag "scroll lamgsam nach unten" */

  position: relative;
  bottom: 0%;                                     /* in kombi mit position absolute */
  left: 0%;                                       /* in kombi mit position absolute */
  top: 0%;                                        /* in kombi mit position absolute */
  right: 0%;                                      /* in kombi mit position absolute */

  display: none;                                  /* ANZEIGE-BEISPIEL: ausgeblendet */

  float: left;                                    /* von Links nach rechts aufbauen - in kombi mit display: */
  justify-content: center;                        /* mittig horizont - float: left    */
  align-items: center;                            /* mittig vertikal - float: left    */

  flex-direction: column;                         /* von oben nach unten aufbauen - in kombi mit display: */
  justify-content: center;                        /* mittig vertikal - flex-direction: column;    */
  align-items: center;                            /* mittig horizont - flex-direction: column;    */

  width: auto;                                    /* Breite von Elementen */
  height: auto;                                   /* Höhe von Elementen */
  min-height: 200px;                              /* Breite von Elementen */
  max-height: 200px;                              /* Höhe von Elementen */
  aspect-ratio: 16/9;                             /* in proportion - mit width, dann height überflüssig */
  width: calc(100% - 4px);                        /* Breite von Elementen - X beispiesweise bei 2px Border*/

  background-color: #efefef;                    /* Hintergrundfarbe von Elementen */
  color: #ffffff;                               /* Farbe von Elementen > KEIN RGBA, sondern #ffffff50; (50%) */

  font-size: 1rem;                                /* schriftgröße */
  text-transform: uppercase;                      /* alle buchstaben groß */
  line-height: 1;                                 /* Zeilenhöhe */
  text-decoration: none;                          /* Effekt auf Schrift */
  font-weight: 800;                               /* Breite der Schrift */

  padding: 0%;                                    /* 0% = alle   /   0% 0% = o+u, r+l    /   0% 0% 0% 0% = o, r, u, l Abstand innen */
  margin: 0%;                                     /* 0% = alle   /   0% 0% = o+u, r+l    /   0% 0% 0% 0% = o, r, u, l Abstand außen */

  cursor: pointer;                                /* Hand statt Mausursor */

  transition: all 0.3s;                           /* verändere alle Eigenschaften in Zeit */

  flex-wrap: wrap;                                /* verteilung über mehrere Zeilen, wenn elemente zu groß - min-width erforderlich */
  row-gap: 1%;                                    /* abstand zwichen horizontal */
  column-gap: 1%;                                 /* abstand zwichen vertikal */

  display: grid;
  grid-template-columns: 66.666% 33.333%;         /* LINKSRECHTS */
  grid-template-rows: 60% 40%;                    /* OBENUNTEN */
  
  overflow: hidden;                               /* wenn größer als container, dann ausblenden bzw. abschneiden */

  object-fit: cover;                              /* bild beschneiden & proportion beibehalten */

  transform: rotate(-90deg);                      /* element drehen */

  filter: grayscale(100%);                        /* filter auf Grafik anwenden */

  opacity: 1;                                     /* element transparenz 0=0% ... 1=100%  */

  z-index: 2;                                     /* element stapeln mit position absolute   */

  /* word-break: break-all;                          Text Umbrechen um sich maximaler Breite anzupassen */

  animation: Beispiel 1.5s linear infinite;                  /* in Verbindung mit @keyframes > Name der Animation, länge in Zeit, wiederholend bspw. */
}
@keyframes Beispiel {
  0% {
    background-color: #008000;
  }
  100% {
    background-color: #333333;
  }
}
.Mutter::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0%;
  background-color: #ffffff;
  clip-path: polygon(0% 100.0000%, 1% 98.4400%, 2% 96.9450%, 3% 95.5150%, 4% 94.1500%, 5% 92.8500%, 6% 91.6150%, 7% 90.4450%, 8% 89.3400%, 9% 88.3000%, 10% 87.3250%, 11% 86.4150%, 12% 85.5700%, 13% 84.7900%, 14% 84.0750%, 15% 83.4250%, 16% 82.8400%, 17% 82.3200%, 18% 81.8650%, 19% 81.4750%, 20% 81.1500%, 21% 80.8900%, 22% 80.6950%, 23% 80.5650%, 24% 80.5000%, 25% 80.5000%, 26% 80.5325%, 27% 80.5975%, 28% 80.6950%, 29% 80.8250%, 30% 80.9875%, 31% 81.1825%, 32% 81.4100%, 33% 81.6700%, 34% 81.9625%, 35% 82.2875%, 36% 82.6450%, 37% 83.0350%, 38% 83.4575%, 39% 83.9125%, 40% 84.4000%, 41% 84.9200%, 42% 85.4725%, 43% 86.0575%, 44% 86.6750%, 45% 87.3250%, 46% 88.0075%, 47% 88.7225%, 48% 89.4700%, 49% 90.2500%, 50% 90.9975%, 51% 91.7125%, 52% 92.3950%, 53% 93.0450%, 54% 93.6625%, 55% 94.2475%, 56% 94.8000%, 57% 95.3200%, 58% 95.8075%, 59% 96.2625%, 60% 96.6850%, 61% 97.0750%, 62% 97.4325%, 63% 97.7575%, 64% 98.0500%, 65% 98.3100%, 66% 98.5375%, 67% 98.7325%, 68% 98.8950%, 69% 99.0250%, 70% 99.1225%, 71% 99.1875%, 72% 99.2200%, 73% 99.2200%, 74% 99.1875%, 75% 99.1225%, 76% 99.1225%, 77% 99.0900%, 78% 99.0250%, 79% 98.9275%, 80% 98.7975%, 81% 98.6350%, 82% 98.4400%, 83% 98.2125%, 84% 97.9525%, 85% 97.6600%, 86% 97.3350%, 87% 96.9775%, 88% 96.5875%, 89% 96.1650%, 90% 95.7100%, 91% 95.2225%, 92% 94.7025%, 93% 94.1500%, 94% 93.5650%, 95% 92.9475%, 96% 92.2975%, 97% 91.6150%, 98% 90.9000%, 99% 90.1525%, 100% 89.3725%, 100% 100%, 0 100%); 	
}
/*
<div class="Mutter">
  <div class="Tochter1">
      <div class="Enkel">
          <p></p>
      </div>
  </div>
  <div class="Tochter2">
      <div class="Enkel">
          <p></p>
      </div>
  </div>
</div>
*/
.Mutter:hover {                         /* wenn mit cursor über Bereich .Mutter, dann mache...   */
}
.Mutter:hover > .Tochter1 {             /* wenn mit cursor über Bereich .Mutter, dann mache mit .Tochter1...   */
}
.Mutter:hover > .Tochter1 p {           /* wenn mit cursor über Bereich .Mutter, dann mache mit dem p in .Tochter1...   */
}
.Mutter:hover > .Tochter1 .Enkel {      /* wenn mit cursor über Bereich .Mutter, dann mache mit dem .Enkel in .Tochter1...   */
}



/* ### WordPress-Klassen ### pblc ### 12.10.2023 ### */
.entry-title {                                      /* Für Wordpress - Titel der Seite standartmäßig ausblenden */
  display: none;
}
p:empty {                                           /* Für Wordpress - leere p`s standartmäßig ausblenden */
  display: none;
}



.nebeneinander {                                     /* Elemente nebeneinander */
  position: relative;
  z-index: 0;
  display: flex;
  float: left;
}



.untereinander {                                     /* Elemente untereinander */
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column!important;
  justify-content: start;
  align-items: start;
}



.zentrieren {                                           /* Elemente zentrieren */
  align-items: center;
  justify-content: center;
}



/*  #   Projektsapezifisch  #   Projektsapezifisch  #   Projektsapezifisch  #   Projektsapezifisch  #   Projektsapezifisch  #   Projektsapezifisch  #   */



/* Arbeitsbereich Raphaela Multhaup */



/* Aufstellung Rezepte */
/* Allgemeine Container */
.Sektion-Oben, .Sektion, .Sektion-Sonder, .Sektion-Unten, .Sektion-Ganz { /* TD: Hier werden gleiche Eigenschaften gebündelt. Das spart Zeilen */
  width: 100%;
  height: auto;
  flex-direction: column;
  display: flex;
  position: relative;
}
.Sektion-Oben {
  padding: 5rem 12.5% 1rem 12.5%;
}
.Sektion {
  padding: 1rem 12.5%;
}
.Sektion-Sonder {
  padding: 3rem 12.5% 0rem 12.5%;
}
.Sektion-Unten {
  padding: 1rem 12.5% 5rem 12.5%;
}
.Sektion-Ganz {
  padding: 5rem 12.5%;
}
@media (min-width: 0px) and (max-width: 1023px) { /* TD: Du hattest hier vorher 600px */
  .Sektion-Sonder {
    padding: 1rem 12.5% 0rem 12.5%;
  }
}



/* Beitragsbild vom Rezept */
.headImg {
  width: 100%;
  aspect-ratio: 20/5;
  border-radius: 0.5rem;
  overflow: hidden;
}
.headImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Quickinfos */
.informatins {
  display: flex;
  gap: 1rem;
}



.div-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efefef;
  padding: 4px 12px;
  gap:  12px;
  border-radius: 0.5rem;
}
.div-icons img {
  height: 1rem;
  width: auto;
}



/* Trennlinie */
.strichoben {
  height: 1px;
  background-color: #efefef;
  margin: 0 0 1rem 0;
}



.calculater {
  display: flex;
  align-items: center;
}
.calculater span {
  margin-right: 1rem;
}
.calculater-help { /* TD: neue Klasse um responsive zu erweitern*/
  display: flex;
  float: left;
  max-width: 100%;
}
@media (min-width: 0px) and (max-width: 767px) {
  input#EingabewertAusInput {
    max-width: 40%;
  }
}




/* Input */
#portions {
  border-radius: 0.4rem 0 0 0.4rem;
  height: 100%; /* TD: Du hattest hier vorher 2.5rem - durch 100% ist er immer = Höhe Button */
  border: thin #efefef solid;
  padding-left: 1rem;
}



/* Tabelle */
table#RezeptEins {
  width: 100%;
  border-spacing: 0;
}
table#RezeptEins tr {
  height: 3rem;
}
/* Gehe in die Tabelle > bearbeite jedes zweite tr > bearbeite jedes td im tr*/
table#RezeptEins tr:nth-child(odd) td {
  background-color: #efefef;
}
/* Gehe in die Tabelle > bearbeite jedes tr > bearbeite jedes erste td im tr*/
table#RezeptEins tr td:first-child {
  border-radius: 0.5rem;
  width: 100%;
  padding-left: 2rem;
  text-align: start;
}
@media (min-width: 0px) and (max-width: 767px) { /* TD: Du hattest hier vorher 600px */
  table#RezeptEins tr td:first-child {
    padding-left: 0.5rem;
  }
}


/* Der Autor */
.author-information {
  width: 100%;
  height: auto;
  display: flex;
  float: left;
  padding-top: 1rem;
}
.author-img {
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  width: 6rem;
  background-color: #008000;
  margin-right: 3rem;
  aspect-ratio: 1/1;
}
.author-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-name {
  width: auto;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  display: flex;
}



@media (min-width: 0px) and (max-width: 767px) {
  .headImg {
    aspect-ratio: 3/2;
  }


  .informatins {
    flex-direction: column;
    align-items: center;
  }


  .div-icons {
    width: fit-content;
  }


  .calculater {
    flex-direction: column;    
  }
  .calculater span {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .calculater .Button-helper {
    width: 60%;
  }
  .calculater .Button {
    width: 100%;
  }


  #portions {
    width: 40%;
  }


  .after::after {
    content: "\A";
    white-space: pre;
  }
  .time span {
    text-align: center;
  }
}



@media (min-width: 0px) and (max-width: 1023px) { /* TD: Du hattest hier vorher 600px */
  .informatins {
    justify-content: center;
  }


  .calculater {
    justify-content: center;    
  } 
  .calculater .Button {
    border-radius: 0 0.4rem 0.4rem 0;
  }


  .author-information {
    flex-direction: column;
    padding-top: 1rem;
    align-items: center;
  }
  .author-img {
    width: 6rem;
    margin-right: 0rem;
  }
  .author-name {
    margin-top: 1rem;
  }
}



/* Arbeitsbereich Helmut Martens */

.main-container {
  display: flex;
  float: left;
  justify-content: space-between;
  z-index: 0;
  transition: all 0.3s;
}
.mc-links {
  width: 40%;
  height: auto;
}
.img_rdt {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.img_rdt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-rechts {
  display: flex;
  flex-direction: column;
  width: 55%;
  height: auto;
}
.mc-rechts p {
  margin-bottom: 2rem;
}



/* Lust auf was Neues */
.bg-grey { 
  background-color: #efefef;
}
.rezeptideen_img_container {
  display: flex;
  justify-content: space-between;
}
.idee_img-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}
.idee_img-c p {
  text-align: center;
  color: #333333;
  font-weight: 600;
  margin-top: 1rem;
}
.idee_img {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 1rem;
  overflow: hidden;
}
.idee_img img {
  width:100%;
  height:100%;
  object-fit: cover;
}



/* VS. */
.h2-center h2 {
  text-align: center;
}
.pfanne_vs_wok {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.wok_text {
  width: 75%;
  display: flex;
  float:left;
  align-items: flex-start;
  justify-content: flex-start;
}
.wok_img {
  width: 20%;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.wok_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



@media (min-width: 0px) and (max-width: 1023px) { 
  .main-container {
    flex-direction: column;
  }


  .mc-links {
    width: 100%;
  }


  .mc-rechts {
    width: 100%;
  }


  .rezeptideen_img_container{
    flex-direction: column;
    align-items: center;
  }


  .idee_img-c {
    width: 50%;
  }


  .pfanne_vs_wok {
    flex-direction: column;
    align-items: center;
  }


  .wok_text {
    width: 100%;
  }


  .wok_img {
    width: 50%;
  }
}



/* Button */
.Button-helper {
  display: flex;
}
.Button {
  background-color: #008000;
  border-radius: 0;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  margin: 0;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1rem;
  line-height: 1;
}
.Button:focus, .Button:hover {
  outline:none;
  background-color: #008000;
  color: #ffffff;
}



/* Arbeitsbereich Thomas Dehmelt */
/* Header */
.newheader {
  position: relative;
  display: flex;
  float: left;
  padding: 2rem 12.5%;
  margin: 0%;
  width: 100%;
  height: auto;
  z-index: 0;
  transition: all 0.3s;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px #33333350;
}
/* Header linker Bereich */
.linksh {
  position: relative;
  display: flex;
  float: left;
  width: 40%;
  height: auto;
  transition: all 0.3s;
  justify-content: flex-start;
}
/* Header linker Bereich Link ums Bild */
.linksh-a {
  display: flex;
  float: left;
}
/* Header linker Bereich Bild im Link */
.linksh-a img {
  width: auto;
  height: 4rem;
  object-fit: cover;
}
/* Header rechter Bereich */
.rechtsh {
  position: relative;
  display: flex;
  float: left;
  width: 60%;
  height: auto;
  transition: all 0.3s;
  justify-content: flex-end;
  align-items: end;
}
/* Header Links und Anker */
.header-link {                                                 /* Links mit Effekt */
  margin: 0 1rem;
  color: #333333;
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
  text-decoration: none !important;
  transition: all .3s;
  padding-bottom: 0rem;
}
.header-link:hover { 
  color: #008000;
}
.header-link:last-child {
  margin: 0 0 0 1rem;
}
.header-link::after {                                           /* Links mit Effekt */
  content: "";
  background-color: #008000;
  height: 0.3rem;
  width: 0%;
  position: absolute;
  display: block;
  bottom: -2rem;
  left: 50%;
  transition: all .3s;
}
.header-link:hover::after {                                     /* Links mit Effekt */
  width: 100%;
  transition: all .3s;
  left: 0%;
}
@media (min-width: 0px) and (max-width: 1023px) {
  .newheader {
      flex-direction: column;
  }
  .linksh {
      width: 100%;
      justify-content: center;
  }
  .rechtsh {
      width: 100%;
      justify-content: center;
      flex-direction: column;
      align-items: center;
  }
  .header-link {  
      margin: 0.5rem 0;
  }
  .header-link:last-child {  
      margin: 0.5rem 0 1rem 0 ;
  }
  .header-link:first-child {  
      margin: 1rem 0 0.5rem 0 ;
  }
  .newheader {
      padding: 2rem 12.5% 0rem 12.5%;
  }
  .header-link::after {
    bottom: -1rem;
  }
}
@media (min-width: 0px) and (max-width: 500px) {
  .linksh-a img  {  
      height: auto;
      width: 100%;
  }
}



/* Footer */
.kw-footer {
  width: 100%;
  display: flex;
  background-color: #008000;
  padding: 2rem 12.5%;
  margin: 0%;
  color: #ffffff;
}
/* Footer linker Bereich */
.kw-footer-links {
  float: left;
  align-items: center;
  justify-content: flex-start;
}
/* Footer linker Bereich Bild im Link */
.kw-footer-links a img {
  object-fit: cover;
  max-height: 3rem;
  width: auto;
}
/* Footer rechter Bereich */
.kw-footer-rechts {
  display: flex;
  align-items: center;
}
/* Footer rechter Bereich Link */
.Link-Footer {                                                 /* Links mit Effekt */
  margin-left: 1rem;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
  text-decoration: none !important;
  transition: all .3s;
  padding-bottom: 0rem;
}
.Link-Footer:hover {                                     /* Links mit Effekt */
    color: #ffffff;
}
.Link-Footer::after {                                           /* Links mit Effekt */
  content: "";
  background-color: #ffffff;
  height: 2px;
  width: 10%;
  position: absolute;
  display: block;
  bottom: -0.5rem;
  left: 50%;
  transition: all .3s;
}
.Link-Footer:hover::after { 
  color: #ffffff;                                    /* Links mit Effekt */
  width: 100%;
  transition: all .3s;
  left: 0%;
}
@media (min-width: 0px) and (max-width: 1023px) {
  .kw-footer {
    flex-direction: column;
  }
  .kw-footer-links {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .kw-footer-rechts {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .Link-Footer {                                                 /* Links mit Effekt */
    margin-left: 0rem;
    margin-left: 1rem;
  }
  .Link-Footer {  
    margin: 0.5rem 0;
  }
  .Link-Footer:last-child {  
    margin: 0.5rem 0 1rem 0 ;
  }
  .Link-Footer:first-child {  
    margin: 1rem 0 0.5rem 0 ;
  }
}
@media (min-width: 1024px) {
  .kw-footer {
    float: left;
  }
  .kw-footer-links {
    width: 50%;
    justify-content: center;
  }
  .kw-footer-rechts {
    width: 50%;
    float: left;
    justify-content: flex-end;
  }
}



/* Loading */
.loader {
  width: 100%;
  height: 100vh;
  background-color: #008000;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  animation: loader 3s linear 1;
}
@keyframes loader {
  0% {
      opacity: 1;
  }
  70% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
.loader-img {
  position: absolute;
  width: 50%;
  height: auto;
  left: 25%;
  z-index: 2;
  animation: loaderImg 2s linear 1;
}
@keyframes loaderImg {
  0% {
      left: 45%;
  }
  50% {
      left: 45%;
  }
  100% {
      left: 25%;
  }
}
.loader-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.kontrolle {
  width: 11.1%;
  aspect-ratio: 1/1;
  position: absolute;
  background-color: 008000;
  z-index: 1;
}
.schleier {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  background-color: #008000;
  animation: schleier 2s linear 1;
  z-index: 3;
  box-shadow: 1rem 1rem 4rem 1rem #008000;
}
@keyframes schleier {
  0% {
      left: 59%;
  }
  50% {
      left: 59%;
  }
  100% {
      left: 100%;
  }
}
@media (min-width: 0px) and (max-width: 1023px) {
  .loader-img {
      width: 80%;
      left: 10%;
  }
  .kontrolle {
      width: 18%;
  }
  @keyframes loaderImg {
      0% {
          left: 42%;
      }
      50% {
          left: 42%;
      }
      100% {
          left: 10%;
      }
  }
  .schleier {
      left: 100%;
  }
  @keyframes schleier {
      0% {
          left: 65%;
      }
      50% {
          left: 65%;
      }
      100% {
          left: 100%;
      }
  }
}



/*IMPRESSUM*/
.Sektion-Daten-Nebeneinander {
  width: 100%;
  height: auto;
  display: flex;
  float: left;
  justify-content: space-between;
}
.Sektion-Daten-Halb {
  width: 47.5%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 0px) and (max-width: 1023px){
  .Sektion-Daten-Nebeneinander {
    flex-direction: column;
  }
  .Sektion-Daten-Halb {
    width: 100%;
  }
}



form.untereinander {
  position: relative;
  z-index: 0;
  margin-bottom: 2rem;
}
.checkpoint {                                     /* Elemente untereinander */
  position: relative;
  display: flex;
  float: left;
  justify-content: start;
  align-items: start;
}
.cp1 {
  padding: 1.5rem 0 0 1.5rem;
}
.cp2 {
  padding: 1.5rem 0 1.5rem 1.5rem;
}
.cp1 input, .cp2 input {
  margin-right: 1rem;
  height: 1.1rem;
}
.Eingabefeld {
  width: 100%;
}
/*.formSperre {
  display: flex;
  position: absolute;
  background-color: #008000;
  width: 100%;
  height: 100%;
  z-index: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all 0.3s;
}
.formSperre p {
  color: #ffffff;
}
form.untereinander:hover > .formSperre {
  transition: all 0.3s;
  opacity: 1;
}*/



.Map {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0%;
  z-index: 1;
  border: 5px solid #008000;
  height: 100%;
  overflow: hidden;
}
.Map-Bild {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.Map-Bild img{
  width: auto;
  height: 110%;
  object-fit: cover;
}
.Map-Info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.Map-Info-Text {
  background-color: #33333370;
  color: #ffffff!important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
.Map-Info-Text p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5%;
  height: 100%;
  font-weight: 800;
}
.Map-Info:hover {
  opacity: 1;
  transition: all 0.3s;
}
.MapLink {
  position: relative;
  background-color: #008000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5%;
  width: 100%;
  height: auto;
}
.MapLink:hover {
  color:  #ffffff;
  transition: all 0.3s;
}
@media (min-width: 0px) and (max-width: 1023px) {
  .Map {
    aspect-ratio: 1/1;
    margin-top: 2rem;
  }
  .Map-Bild img{
    height: 200%;
  }
}



/* Slider auf Startseite */
.back, .next {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  bottom: 50%;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #efefef;
}
.back {
  left: 0px;
}
.next {
  right: 0px;
}
.back span, .next span {
  font-size: 1.5rem;
  font-weight: 800;
  color: #333333;
  line-height: 1;
  text-align: center;
  transition: all 0.3s;
  padding-bottom: 0.3rem;
}
.next:hover {
  transition: all 0.3s;
  background-color: #333333;
}
.back:hover {
  transition: all 0.3s;
  background-color: #333333;
}
.back:hover > span, .next:hover > span {
  transition: all 0.3s;
  color: #efefef;
}
@media (min-width: 0px) and (max-width: 767px) {
  .back, .next {
    width: 2rem;
  }  
}


/* Mailformular */
.MailVersand {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff80;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  overflow: hidden;
}
.MailBox {
  padding: 3rem;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #008000;
}
.MailBox h2, .MailBox p {
  color: #ffffff;
  text-align: center;
}
.spinner {
  position: relative;
  background-color: #008000;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 1rem;
  z-index: 0;
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  box-shadow: 1rem 1rem 1rem 0rem #ffffff inset;
  animation: spinner 0.5s linear infinite;
}
@keyframes spinner {
  0% { transform: rotate(0deg);
  }
  100% { transform: rotate(360deg);
  }
}
.spinner-in {
  position: absolute;
  background-color: #008000;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  z-index: 1;
}