@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth; /*Scrollverhalten Flüssig*/
}
header {
  display: flex; /*Flexible Inhalte*/
  justify-content: space-between; /*Abstand zwischen Elementen*/
  align-items: center; /*Inhalte Zentriert*/
  padding: 1rem 2rem; /*hier: oben&unten rechts&links*/
  background: white; /*Hintergrundfarbe*/
}
.PC {
  font-family: 'Menco', sans-serif; /*Klasse PC soll feste Schriftart haben*/
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
a {
  font-family: "menco", sans-serif; /*a, bzw. jeder Text feste Schriftart*/
  font-weight: 500;
  font-style: normal;
  font-size: 1.25vw;
}
header img {
  max-height: 100px; /*Logo mit begrenzter Höhe*/
}
.main-nav ul { /*Eigenschaften von Text bei Nav*/
  list-style: none; /*Keine Symbole*/
  display: flex; /*Flexiblen Inhalt*/
  justify-content: flex-end; /*Rechts bzw. am Ende ist*/
  gap: 2rem; /*Abstand zwischen Elementen*/
  background-color: white; 
  padding: 1rem 2rem; 
  margin: 0; /*Verschiebung*/
}
.main-nav ul ul { /*2. Ul*/
  display: none; /*versteckt*/
  position: absolute; /*fest verankert*/
}
.main-nav li a {
  text-decoration: none;
  color: #2e5902;
  font-weight: bold;
  font-size: 1rem;
  transition: color 0.3s ease; /*Hoveranimation*/
  position: relative; /*Schriftfarbe etc. von Ul elementen*/
}
.dropdown {
  position: relative;
} /*Anker für dropdown-menü*/
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%); /*Verschiebung um 50% von Breite nach links*/
  background-color: #2e5902;
  color: white;
  padding: 0.5rem 0;
  min-width: 150px;
  z-index: 1000;
  flex-direction: column; /*Von oben nach unten*/
}
.dropdown-menu a {
  color: inherit; /*Textfarbe Elternelement*/
}
.dropdown:hover .dropdown-menu {
  display: block; /*Bei Hovern wird menü angezeigt*/
  background-color: #2e5902;
}
.dropdown:hover .dropdown-menu a {
  color: white; /*Hovern hat Farbe*/
}
.dropdown-menu li {
  width: 100%;
}
.dropdown-menu a {
  display: block; /*Text soll mit dropdownmenü immer angezeigt werden*/
  padding: 0.5rem 1rem;
  color: white;
}
.dropdown-menu li a:hover {
  background-color: white !important;
  color: #2e5902 !important; /*Hoveränderungen von Dropdown*/
}
.dropdown-sub {
  position: relative;
}
.dropdown-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #3c401e;
  color: white;
  min-width: 180px;
  z-index: 1001;
  padding: 0;
}
.dropdown-submenu a {
  color: inherit;
}
.dropdown-sub:hover .dropdown-submenu {
  display: block;
  background-color: #3c401e;
}
.dropdown-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
  width: 100%;
  background-color: #3c401e;
}
.dropdown-submenu a:hover {
  background-color: white !important;
  color: #3c401e !important;
}
.main-nav li a:hover {
  color: #000000; /*Bei dem Text wie "Unsere Tiere" Farbe bei Hovern*/
}
.nav-separator {
  border: none;
  height: 2px;
  background-color: #2e5902;
  margin: 0 0 1rem 0; /*Oben, rechts, unten, links*/
  width: 100%;
} /*Trennlinie*/
.tierheim {
  font-family: "menco", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #2e5902;
  font-size: 2em;
  margin: 0 0 3rem 44px;
} /*Schrift Tierheim*/
.hero img {
  width: 100%;
  height: auto;
  margin: 12px 0 0 0;
} /*Eigenschaften Bild*/
.aktuelles, .helfen, .unsere-tiere {
  padding: 2rem;
} /*Abstand überall*/
.info-grid {
  display: grid;
  grid-template-columns: 166fr 349fr 169fr 389fr 127fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  padding: 2rem 0;
} /*Grid mit 5 Spalten 2 Zeilen mit automatischer Höhe*/
.title {
  grid-column: 2 / 3; /*Geht von Spalte 2 - vor 3, bzw. 2. Spalte*/
  grid-row: 1 / 2; /*Geht von Zeile 1 - vor 2, bzw. 1. Zeile*/
  font-family: "amatic-sc", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #2e5902;
} /*Position im Grid*/
.text:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
} /*Leeres Element*/
.text:nth-of-type(2) {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}
.text {
  font-family: "menco", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
} /*Eigenschaften Text*/
.aktuelles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem;
  background: rgba(191, 129, 75, 0.6);
  gap: 2rem;
  flex-wrap: wrap;
} /*Flexbox mit Elementen*/
.aktuelles-text {
  flex: 2;
} /*Position*/
.aktuelles-bild {
  flex: 1;
  text-align: right;
} /*Position rechts, darum text links*/
.aktuelles-bild img {
  max-width: 100%;
  width: 400px;
  height: auto;
  border-radius: 8px;
} /*Eigenschaften Bild*/
.helfen {
  background: rgba(191, 129, 75, 0.6);
  color: #2e5902;
  text-align: center;
} /*Eigenschaften Section*/
.help-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background-color: rgba(191, 129, 75, 0.6);
} /*Flexible Anordnung mit Abständen*/
.help-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #2e5902;
}
.help-logo {
  height: 60px;
}
.help-center {
  flex: 1;
  padding: 0 2rem;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
.help-right {
  display: flex;
  align-items: center;
}
.arrow-icon {
  width: 48px;
  height: 48px;
}
.changing-image {
  position: relative;
  width: 48px;
  height: 48px;
} /*Höhe*/
.changing-image img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
} /*hoveranimation*/
.b2 {
  opacity: 0;
} /*b2 ausgeblendet*/
.changing-image:hover .b2 {
  opacity: 1;
} /*Bei hover wird b2 eingeblendet*/
.changing-image:hover .b1 {
  opacity: 0;
} /*Und b1 ausgeblendet*/
.nav-separator2 {
  border: none;
  height: 2px;
  background-color: #8c5535;
  width: 100%;
}
.unsere-tiere {
  background: rgba(191, 129, 75, 0.6);
  text-align: center;
  position: relative;
  padding: 4rem 2rem;
  overflow: hidden; /*Wenn inhalt zu groß wird er versteckt*/
} 
.pfoten-bild {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: auto;
  opacity: 0.9; /*Transparenz*/
}
.pfoten-links {
  left: 1rem;
}
.pfoten-rechts {
  right: 1rem;
}
.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap; /*Kein Umbruch*/
  margin-top: 1rem;
} /*Gallery ist Flexbox*/
.main-img {
  width: clamp(100px, 30vw, 500px); /*Min. / Wunsch / Max.*/
  max-width: 500px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.side-img {
  width: clamp(100px, 20vw, 300px);
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  object-fit: cover; /*Füllt gesamte Box ohne Bildverzerrung*/
}
.pfoten {
  width: clamp(40px, 5vw, 80px);
  height: auto;
  opacity: 0.9;
}
@media (max-width: 850px) {
  .gallery {
    flex-direction: column;
    align-items: center;
  } /*Bei unter 850px Breite werden Bilder untereinander angezeigt*/
}
footer {
  background: #402318;
  color: #bf814b;
  padding: 2rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
} 
.footer-col {
  flex: 1;
  min-width: 200px;
  margin: 1rem;
}
h2 {
  font-family: "amatic-sc", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2e5902;
  font-size: 2em;
}
p {
  font-family: "menco", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: left;
}
@media (min-width: 1250px) {
  p {
    font-size: 1rem;
  } /*Bei min. 1250 pixeln wird die Schriftgröße von "p" zu 1rem (rem ist skalierbare Größe)*/
}
@media (max-width: 1249px) and (min-width: 851px) {
  p {
    font-size: 1.75vw;
  } /*Bei 851-1249px ist die Schriftgröße 1.75% von der Websitebreite*/
}
@media (max-width: 850px) {
  p {
    font-size: 10pt;
  } /*Bei bis zu max. 850px Schriftgröße auf 10p (Druchstile umrechnungstabelle Online benutzt)*/
}
h4 {
  font-family: "menco", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
} /*Schrifteigenschaften von der 4. Überschrift (footer)*/
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 2rem;
  background-color: 402318;
  color: #D8A05B;
  padding: 2rem;
  font-family: "menco", sans-serif;
  align-items: start;
} /*Anordnungen im Footer-grid*/
.footer-logo img {
  width: 100px;
  height: auto;
}
.footer-col h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.footer-col p {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 300px;
}
.social-icons {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0;
}
.social-icons img {
  width: 100px;
  height: 50px;
}
.social-extra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.social-extra img {
  width: 50px;
  height: 50px;
}
.footer-bottom {
  width: 100%;
  grid-column: 1 / -1;
  text-align: left;
  font-size: 0.9rem;
  margin-top: 2rem;
}
.footer-bottom a {
  color: #D8A05B;
  text-decoration: none;
  margin-right: 1rem;
}
.footer-bottom a:hover {
  text-decoration: underline;
} /*Die Links ganz unten im Footer sollen beim hovern unterstrichen werden*/
.PC {
  display: block;
} /*Standartmäßig div class=PC anzeigen*/
.Handy {
  display: none;
} /*Standartmäßig div class=Handy nicht anzeigen*/
@media (max-width: 850px) {
  .PC {
    display: none;
  }
  .Handy {
    display: block;
  } /*Bei bis zu max. 850px ist es anderst rum, PC aus, Handy an*/
}
/*BODY 2*/
/**/
/**/
/**/
/**/
/* Mobile-Ansicht */
@media screen and (max-width: 850px) {
  .menueHandy2 {
    display: none;
    flex-direction: column;
    background-color: #ffffff;
    position: absolute;
    top: 80px;
    right: 0;
    width: 70%;
    z-index: 1000;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  } /*Eigenschaften Nav bei Klasse Handy*/
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background: white;
  }
  header img {
    max-height: 50px;
  }
  .Handy {
    font-family: 'Menco', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
  }
  .Handy {
    position: relative;
    width: 100%;
  }
  .burger2 {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 10px;
    z-index: 20;
    padding: 10px;
  }
  .burger2 img {
    max-width: 50px;
    width: 100%;
    height: auto;
    cursor: pointer; /*Macht bei Hover Mauszeiger zu Hand*/
  }
  #toggle2 { /*Spricht Element mit id=toggle2 an*/
    display: none; /*Zeigt normal nichts an*/
  }
  #toggle2:checked + .burger2 + .menueHandy2 {
    display: flex;
  } /*wenn Checkbox angeklickt teigt es an*/
  .menueHandy2 {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 250px;
    background-color: #2d4e1d;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 15;
    overflow-y: auto;
  }
  .menulabel2 {
    display: block;
    width: 80vw;
    max-width: 500px;
    margin: 6px auto;
    padding: 14px 20px;
    background-color: transparent;
    text-align: center;
    color: white;
    font-size: 18px;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
  }
  .menulabel2:hover {
    background-color: #d2b49c;
    color: white;
    transform: scale(1.02);
  }
  .unterpunkt2 {
    display: none;
    flex-direction: column;
    padding-left: 0;
    gap: 5px;
  }
  input[type="checkbox"]:checked + label + .unterpunkt2 {
    display: flex;
  } /*Zeigt Elemente an, wenn man auf Ratgeber oder Notfälle klickt*/
  .unterpunkt2 a {
    font-size: 15px;
    background-color: #3c401e;
    padding: 10px;
    width: 70vw;
    max-width: 450px;
    margin: 2px auto;
    text-align: center;
    border-radius: 4px;
    color: white;
    text-decoration: none;
  }
  .unterpunkt2 a:hover {
    background-color: white;
    color: #2d4e1d;
  }
  .hauptpunkt2 input[type="checkbox"]  { /*Greif inputelement von typ checkbox*/
    display: none;
  }
  .hauptpunkt2 input:checked + label + .unterpunkt2 {
    display: flex;
  }
  .unterpunkt2 a {
    font-size: 14px;
  }
}
.hero2 img {
  width: 100%;
  height: 100%;
  margin: 5px 0 0 0;
}
.info-grid2 {
  display: grid;
  grid-template-columns: 50fr 323.75fr 25fr; /*Verteilung*/
  grid-template-rows: auto auto;
  gap: 0.25rem;
  padding: 1rem 0 2rem 0;
}
.title2 {
  grid-column: 2;
  grid-row: 1;
  font-family: "amatic-sc", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2e5902;
  text-align: center;
  justify-self: center;
  align-self: center;
}
.info-grid2 p {
  font-size: 8.5px;
}
@media (max-width: 850px) { /*Bei bis zu 850px hat text eigentschaften...*/
  .text2 {
    grid-column: 2;
    grid-row: 2;
    font-family: "menco", sans-serif;
    font-size: 10px !important;
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;
    color: #1a1a1a;
    max-width: 100%;
    margin: -15px auto;
    text-align: center;
  }
}
@media (max-width: 850px) { /*Bei bis zu 850px hat 2. Überschrift folgende eigenschaft, wird gegenüber urprünglicher präorisiert*/
  h2 {
    font-size: 1.25rem !important;
  }
}
@media (max-width: 850px) {
  .slider2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(191, 129, 75, 0.6);
    padding: 1rem;
    position: relative;
  }
  .slider2 input[type="radio"] {
    display: none;
  } /*Alle radiobuttons sind unsichtbar*/
  .slide-wrapper2 {
    position: relative;
    width: 60vw;
    max-width: 500px;
  }
  .slide2 {
    display: none;
  }
  .slide2 img {
    width: 100%;
    border-radius: 10px;
    align-items: center;
    text-align: center;
    justify-self: center;
    align-self: center;
    object-fit: cover;
  }
  #slide1:checked ~ .slide-wrapper2 #s1, #slide2:checked ~ .slide-wrapper2 #s2, #slide3:checked ~ .slide-wrapper2 #s3 {
    display: block; /*Ist slide.. ausgewählt so wird das element mit der Klasse slide-wrapper und id="s.." ausgewählt*/
  }
  @media (min-width: 650px) {
    .arrow-nav2 {
      position: relative;
      width: 100%;
      max-width: 500px;
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      pointer-events: none;
    } /*Position der Pfeile bei über 650px*/
    .arrow2 {
      display: none;
      pointer-events: auto;
      cursor: pointer;
    }
    .arrow2 img {
      width: clamp(24px, 5vw, 48px);
      height: auto;
      transition: 0.3s ease;
    }
    .arrow2.prev img:hover {
      content: url("../assets/icons/button hover links.svg");
    } /*Beim Hovern soll der Button wechseln*/
    .arrow2.next img:hover {
      content: url("../assets/icons/button hover.svg");
    } /*Hier auch*/
    .arrow2 {
      display: none;
    } /*Klasse soll nicht angezeigt werden img schon*/
    #slide1:checked ~ .arrow-nav2 .prev1, #slide1:checked ~ .arrow-nav2 .next1, #slide2:checked ~ .arrow-nav2 .prev2, #slide2:checked ~ .arrow-nav2 .next2, #slide3:checked ~ .arrow-nav2 .prev3, #slide3:checked ~ .arrow-nav2 .next3 {
      display: block;
    } /*Ist slide.. ausgewählt so wird das element mit der Klasse arrow-nav2 . "..." und id="s.." ausgewählt*/
    h2 {
      font-family: "amatic-sc", sans-serif;
      font-size: 2em;
      color: #2e5902;
      margin-bottom: 1rem;
    }
  }
}
@media (max-width: 650px) {
  .arrow-nav2 {
    position: absolute;
    top: 50%;
    width: 90vw;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
  } /*Position der Pfeile bei unter 650px*/
  .arrow2 {
    pointer-events: auto;
    cursor: pointer;
  }
  .arrow2 img {
    width: 40px;
    height: 40px;
    transition: 0.3s ease;
  }
  .arrow2.prev img:hover {
    content: url("../assets/icons/button hover links.svg");
  }
  .arrow2.next img:hover {
    content: url("../assets/icons/button hover.svg");
  }
  .arrow2 {
    display: none;
  }
  #slide1:checked ~ .arrow-nav2 .prev1, #slide1:checked ~ .arrow-nav2 .next1, #slide2:checked ~ .arrow-nav2 .prev2, #slide2:checked ~ .arrow-nav2 .next2, #slide3:checked ~ .arrow-nav2 .prev3, #slide3:checked ~ .arrow-nav2 .next3 {
    display: block;
  }
  h2 {
    font-family: "amatic-sc", sans-serif;
    font-size: 2em;
    color: #2e5902;
    margin-bottom: 1rem;
  }
}
@media (max-width: 850px) {
  .aktuelles2 {
    display: grid;
    grid-template-columns: 10fr 300fr 10fr;
    grid-template-rows: auto auto;
    gap: 0rem;
    padding: 1rem 0 2rem 0;
    background-color: rgba(191, 129, 75, 0.6);
    text-align: center;
  } /*Aktuelles Anordnung bei unter 850px*/
  .aktuelles-title2 {
    grid-column: 2;
    grid-row: 1;
    font-family: "amatic-sc", sans-serif;
    font-size: 2em;
    color: #2e5902;
    justify-self: center;
  }
  .aktuelles-text2 {
    grid-column: 2;
    grid-row: 2;
    font-family: "menco", sans-serif;
    font-size: 8.5px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;
    color: #000000;
    margin: -15px auto;
    max-width: 100%;
    text-align: center;
  }
  .aktuelles-bild2 {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    margin-top: 1.5rem;
  }
  .aktuelles-bild2 img {
    width: clamp(150px, 60vw, 61vw);
    max-width: 60vw;
    border-radius: 8px;
    object-fit: cover;
  }
  .aktuelles2 p {
    font-size: 8.5px;
  }
  .aktuelles2 h2 {
    font-weight: bold;
  }
}
@media (max-width: 850px) {
  .tierheim2 {
    font-family: "menco", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #2e5902;
    font-size: 1.25em;
    margin: 0 0 1rem 25px;
  } /*Eigenschaften Klasse "tierheim2" bei unter 850px*/
  .nav-separator3 {
    border: none;
    height: 2px;
    background-color: #2e5902;
    margin: 0 0 0.5rem 0;
    width: 100%;
  }
  .helfen2 {
    background: rgba(191, 129, 75, 0.6);
    color: #2e5902;
    text-align: center;
  }
  .help-grid2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background-color: rgba(191, 129, 75, 0.6);
  }
  .help-left2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #2e5902;
  }
  .help-logo2 {
    height: 60px;
  }
  .help-center2 {
    flex: 1;
    padding: 0 2rem;
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5;
  }
  .help-right2 {
    display: flex;
    align-items: center;
  }
  .arrow-icon2 {
    width: 40px;
    height: 40px;
  }
  .help-text2 p {
    font-family: "menco", sans-serif;
    font-size: 15px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;
  }
  .help-title2 h2 {
    font-size: 23px !important;
    font-weight: bold;
  }
  .changing-image2 {
    position: relative;
    width: 30px;
    height: 30px;
  }
  .changing-image2 img {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease;
  }
  .b22 {
    opacity: 0;
  }
  .changing-image2:hover .b22 {
    opacity: 1;
  }
  .changing-image2:hover .b12 {
    opacity: 0;
  } /*Button verändert sich wie bei PC div*/
}
@media (max-width: 850px) and (min-width: 400px) {
  .footer-grid2 {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-areas:
      "logo info social"
      "logo info tierschutz"
      "bottom bottom bottom";
    gap: 2rem;
    background-color: rgba(64,35,24,1);
    color: #D8A05B;
    padding: 2rem;
    font-family: sans-serif;
    align-items: start;
  } /*Grid für Footer zwischen 400 und 850px*/
  .footer-logo2 {
    grid-area: logo;
  }
  .footer-logo2 img {
    width: 100px;
    height: auto;
  }
  .footer-info2 {
    grid-area: info;
  }
  .footer-info2 h4 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  .footer-info2 p {
    font-size: 0.5rem;
    line-height: 1.4;
    max-width: 250px;
    margin-bottom: 1rem;
  }
  .footer-social2 {
    grid-area: social;
  }
  .footer-social2 h4 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  .social-icons2 {
    display: flex;
    margin-top: 1rem;
    margin-right: 1rem;
  }
  .social-icons2 img {
    width: 75px;
    height: 75px;
    margin-right: -2rem;
  }
  .footer-tierschutz2 {
    grid-area: tierschutz;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .footer-tierschutz2 img {
    width: 50px;
    height: auto;
  }
  .footer-tierschutz2 span {
    font-size: 1rem;
    font-family: "menco", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    color: white;
  }
  .footer-bottom2 {
    grid-area: bottom;
    text-align: left;
    font-weight: 100;
    font-size: 5rem;
    margin-top: 2rem;
  }
  .footer-bottom2 a {
    color: #D8A05B;
    text-decoration: none;
    margin-right: 1rem;
  }
  .footer-bottom2 a:hover {
    text-decoration: underline;
  }
  .footer-logo2, .footer-info2, .footer-social2, .footer-tierschutz2, .footer-bottom2 {
    justify-self: center;
  }
  .footer-info2 p, .footer-social2 h4, .footer-info2 h4, .footer-tierschutz2 span {
    text-align: left;
  }
  .footer-tierschutz2 {
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
  }
  .social-icons2 {
    justify-content: center;
  }
  .social-icons2 img {
    width: 40px;
    height: 40px;
    gap: 40px;
  }
  .social-icons2 a {
    width: 40px;
    height: 40px;
    gap: 40px;
  }
  .footer-bottom2 {
    font-size: 0.7rem;
    margin-top: 1rem;
  }
}
@media (max-width: 400px) {
	.footer-logo2 {
    grid-area: logo;
    justify-self: center;
  } /*Eigenschaften footer bei weniger als 400px*/

  .footer-logo2 img {
    width: 60px; /* oder was passend aussieht */
    height: auto;
  }
  .footer-info2 h4, .footer-social2 h4 {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
  }
  .footer-info2 p, .footer-tierschutz2 span {
    font-size: clamp(0.6rem, 3.5vw, 0.9rem);
	 text-align: left;
  }
  .social-icons2 img {
    width: 32px;
    height: 32px;
  }
  .footer-tierschutz2 img {
    width: 36px;
    height: auto;
  }
.footer-tierschutz2 span {
    font-size: 1rem;
    font-family: "menco", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    color: white;
  }
  .footer-bottom2 {
    font-size: 0.65rem;
  text-align: left;
  padding-top: 1rem;
	}
	  .footer-bottom2 a{
    color: #D8A05B;
	}
}