@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap");

.nnh-button {
  background-color: #f5f5f5;
  color: #4b4b4b;
  border: 2px solid #8DA57A;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.nnh-button:hover {
  background-color: #fff0e0;
  transform: scale(1.02);
}

.seitenueberschrift {
  font-size: 3rem;
}

body {

  font-family: "Amatic SC", bold;

  margin: 0;

  padding: 0;

}



/*****************************  HEADER-Bilder  ***********/



.parallax-img-1 {

  height: calc(100vw / 1.895);

  width: 100%;

  background-attachment: fixed; 

  background-position: 0 80px; /* 0 horizontale ausrichtung; 80px höhe der Navigation*/

  background-repeat: repeat;

  background-size: 100% calc(100vw / 1.895);

  margin: 0;

  padding: 0 0 0 0;

}



#frame_kontakt{

  background-image: url("./../Bilder/AnfahrtNNH2.jpg");

}



#frame_bluehwiese{

  background-image: url("./../Bilder/Bluehpate.jpG");

}



#frame_huehner{

  background-image: url("./../Bilder/Huehner3.jpg");

}



#frame_produkte{

  background-image: url("./../Bilder/ProdukteEier2.jpg");

}



#frame_alpakas{

  background-image: url("./../Bilder/Alpaka2.jpg");

}



#frame_impressum{

  background-image: url("./../Bilder/Impressum.jpg");

}

#frame_news{

  background-image: url("./../Bilder/news.jpg");

}

#frame_auerochsen{

  background-image: url("./../Bilder/MutterMitKind.jpg");

}



.Ueberschrift {

  color: white;

  margin: 0;

  padding: 5vw 0 0 0;

  text-align: center;

  text-shadow: 2px 2px 8px #000000;

  font-size: 8vw;

  vertical-align: middle;

}

.Bildunterschrift {
  color: black;
  position: relative;
  inset: auto calc(50% - 100px) 0 calc(50% - 100px);
  font-size: 1vw;
}



#UeberKontakt{

  padding: 6.5vw 0 0 0;

}



#UnterAlpaka, #UnterHuehner{

  padding: 23vw 0 0 0;

}



#UnterKontakt{

  padding: 13vw 0 0 0;

}

.Unterschrift {

  color: white;

  margin: 0;

  padding: 4vw 0 0 0;

  text-align: center;

  text-shadow: 2px 2px 8px #000000;

  font-size: 5vw;

  vertical-align: middle;

}



/*************************   Navigation   *********************************************************/

.navBackground{

  height: 80px;

  width: 100%;

  margin: 0;

}



#menu {

  font-family: "Amatic SC", bold;

  font-size: 35px;

  text-align: center;

  vertical-align: middle;

  position: fixed;

  background-color: #ffffff;

  top: 0px;

  left: 0;

  width: 100%;

  height: 80px;

  border-bottom: 1px solid black;

  box-shadow: -2px 2px 20px -7px rgba(0, 0, 0, 0.57);

  z-index: 9;

}



#menu ul {

  margin: 0;

  position: relative;

  top: 5px;

  padding: 0;

}



#menu .main-menu {

  display: none;

  

}

#menu img {

  display: inline-block;

}

.Logo {

  padding: 0;

  width: 70px;

  position: fixed;

  right: 9px;

  top: 6px;

}



#tm:checked + .main-menu {

  display: block;



}



#menu input[type="checkbox"],

#menu ul span.drop-icon {

  display: none;



}



#menu li,

#toggle-menu,

#menu a {

  position: relative;

  display: block;

  color: black;

  font-size: 30px;

  text-decoration: none;

}



#toggle-menu,

#menu a {

  padding: 0.7em 0.5em 0.3em 0.5em;

  height: 40px;

  vertical-align: middle;

  background-color: white;

}



#lastToggle{

  border-bottom: 1px solid black;

  box-shadow: 0px 7px 12px -7px rgba(0, 0, 0, 0.57);

  z-index: 9;

}



#liste{

  color: #000000;

  font-family: "open Sans", regular;

  text-decoration: none;

  background-color: #ffffff;

  margin-left: 1rem;

}



/*Schriftfarbe ändern bei hover*/

#menu a:hover {

  color: rgba(6, 88, 6, 0.637);

}

#menu .sub-menu a:hover {

  color: rgba(6, 88, 6, 0.637);

}



#toggle-menu .drop-icon,

#menu li label.drop-icon {

  position: relative;

  left: 0.2em;

  top: 0px;

}

/*Anzeigen der "Navigation" wenn klein*/

#menu .drop-icon {

  line-height: 1;

}



#menu .active {

  color: rgba(6, 88, 6);

  font-weight: bold;

}

/*Bei einem Bildschirm > 900px wird Navigation komplett angezeit*/

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

  #menu .main-menu {

    display: inline-block;

    text-align: center;

    

  }

  

  /*Text mittig, wenn ganz gezeigt*/

  #menu li,

  #toggle-menu,

  #menu a {

    position: relative;

    display: inline-block;

    vertical-align: middle;

    color: black;

  }

  #toggle-menu,

  #menu label.drop-icon {

    display: none;

  }



  #menu li {

    border-width: 0 1px 0 0;

    display: inline-block;

    padding: 0 10px;

  }



  .sub-menu li {

    display: inline-block;

  }



  #lastToggle{

    border-bottom: 0px solid black;

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.57);

    z-index: 9;

  }

}

/************************  Main  ****************************************************************/

main {

  max-width: 90vw;

  margin: auto;

  margin-top: 3vw;

  scroll-behavior: smooth;

}

/*Schrift*/

main h1 {

  color: #000000;

  font-family: "Amatic SC", cursive;

  text-align: center;

}

main h2 {

  color: #000000;

  font-family: "Amatic SC", cursive;

  text-align: center;

  font-size: clamp(42px,5vw,64px)

}

main h3 {

  color: #000000;

  font-family: "Amatic SC", cursive;

  margin-left: 16px;

  margin-right: 16px;

  margin-top: 0;

  margin-bottom: 16px;

  font-size: 40px;

}



/*Karten Übereinander*/

.uebereinander .card {

  z-index: 2;

  background-color: white;

  display: flex;

  border-radius: 4px;

  box-shadow: -2px 2px 20px -7px rgba(0, 0, 0, 0.57);

  margin-left: auto;

  margin-right: auto;

  max-width: 1200px;

  text-decoration: none;

  flex-wrap: wrap;

}



label{

  font-size: 22px;

}



/*Karten Allgemein*/

.card h2 {

  margin-left: 1rem;

  text-decoration: none;

}

p {

  color: #000000;

  font-family: "open Sans", regular;

  text-decoration: none;

  font-size: 18px;

  margin-left: 1rem;

  margin-right: 1em;

}

.uebereinander .card img {
  height: auto;
  max-width: 100%;
}

/*Karten nebeneinander*/

.centered,

.index {

  margin: 0 auto;

  padding: 0 1em;

  cursor: default;

}



/*Maps darstellung*/

.map {

  overflow: hidden;

  padding-bottom: 56.25%;

  position: relative;

  height: auto;

}



.map iframe {

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  position: absolute;

  border-width: 0;

}



@media screen and (min-width: 52em) {

  .centered,

  .index {

    max-width: 70em;

  }

}



.site-title a {

  color: hsl(5, 45%, 95%);

  text-decoration: none;

}



.mappi{

  width: 100%;

}



.paddy{

  position: relative;

  bottom:0;

  left:0;



  padding: 0 0.5em 0.5em 0.5em; /*erster Wert oben, zweiter rechts, driter unten, vierter links */

}



.card {

  background: white;

  margin-bottom: 2em;

  border-radius: 4px;

  box-shadow: 3px 3px 8px hsl(0, 0%, 69%);



}

a {

  text-decoration: none;

  color: #000000;

  cursor: default;

}

.card a {

  color: black;

  text-decoration: none;

}



.link:hover {

  box-shadow: 3px 3px 8px hsl(0, 0%, 47%);

  cursor: pointer;

  text-decoration: none !important;

}



.hyperlink:hover{

  cursor:pointer;

  text-decoration: none !important;

}

.hyperlink {

  color:blue !important;

  text-decoration: underline !important;

}

.card-content {

  padding: 1.4em;

   

}



.card-content h2 {

  margin-top: 0;

  margin-bottom: 0.5em;

  font-weight: normal;

}



.thumbnail {

  margin: 0;

  width: 100%;

}

.thumbnail img {

  border-top-left-radius: 4px;

  border-top-right-radius: 4px;

  width: 100%;

  height: auto;

}

/* Produktpalette 

product: vergleichbar mit cards

tile: vergleichbar mit card*/



.tile{

  min-width: 29vw;

  height: 29vw;

  background-size: contain;

  background-repeat: no-repeat;

  padding: 0 0 0 0;

  margin: 0 1vw 1vw 0;

  box-shadow: 3px 3px 8px hsl(0, 0%, 69%);

  border-radius: 4px;

}



.tiles {

  display: flex;

  justify-content: center;

  width: 100%;

}

.tiles img {
  padding: 10px;
  width: 50%;
}



.hidden{

  display:none;

}



.header{

  display: flex;

}



.showDescription{

  display: block;

  background: white;

  margin-bottom: 2em;

  border-radius: 4px;

  box-shadow: 3px 3px 8px hsl(0, 0%, 69%);

}



.littleImage{

  width: 21vw;

  height: 21vw;

}



#littleImageCows{

  width:31vw;

}

.littleImage img{

  width: 20vw;

  height:20vw;

  background-size: contain;

  margin: 0.5vw;

}



#imgCows{

  width: 30vw;

  height:20vw;

  background-size: contain;

  margin: 0.5vw;

}





.href{

  color: rgb(36, 102, 141) !important; 

  text-decoration: underline !important; 

}



.detailContent{

  display: flex;

}



.variableFlex{

  display:flex;

}



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

  .variableFlex{

    display: block;

  }

}



#frameBild{

  display:block;

  width: 52vw;

  height: 23.5vw;

  margin: 6vw 2vw 6vw 2vw;

  border-radius: 8px;

  background-image: url('./../Bilder/Flauschkugeln.jpg');

  background-size:contain;

  background-repeat: no-repeat;

}



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

  #frameBild{

    display:none;

  }

}



.exitbutton:hover{

border-color: black;

}



.placeholder{

  width: 87.4vw;

  color: #ffffff;

}



.exitbutton{

  border-style: none;

  position: sticky;

  position: -webkit-sticky;

  top: 0vw;

  z-index: 1;

  font-size: 2.5vw;

  text-align: center;

  height: 2.5vw;

  width: 2.5vw;

  display: table-cell;

  vertical-align: middle;

  border-width: 0.1vw;

  border-color:white;

  border-style:solid;

}



.tile:hover{

  box-shadow: 0px 0px 8px 5px hsl(0, 0%, 69%);

  width: 29.1vw;

  height: 29.1vw;

}



.tile p{

  color: white;

  text-align: left;

  text-shadow: 2px 2px 8px #000000;

  font-size: 3.4vw;

  vertical-align: middle;

  margin: 2vw 5px 0 2vw;

}



#tile_eggs{

  background-image: url("./../Bilder/EierQuadrat.jpg");

}



#imgEggs{

  background-image: url('./../Bilder/Hofladen.jpg');

}



#tile_hay{

  background-image: url("./../Bilder/HeuVerkauf.jpg");

}



#imgHay{

  background-image: url("./../Bilder/Heupresse.jpg");

}



#tile_horses{

  background-image: url("./../Bilder/Gretje.jpg");

}



#imgHorses{

  background-image: url("./../Bilder/PferdHell.jpg");

}



#tile_cows{

  background-image: url("./../Bilder/RindMitBaby.jpg");

}



#imgCows{

  background-image: url("./../Bilder/MutterMitKind.jpg");

}

#tile_holly{

  background-image: url("./../Bilder/Holunder.jpg");

}



#imgSirup{

  background-image: url("./../Bilder/Holunder\ im\ Mai.PNG");

}



#imgBusch{

  background-image: url("./../Bilder/busch.jpg");

}



#tile_alpaka{

  background-image: url("./../Bilder/Benthe.jpeg");

}




#imgAlpaka{

  background-image: url("./../Bilder/AdlerSchutz.jpg");

}



#tile_urlaub{

  background-image: url("./../Bilder/Pferde.jpg");

}



#imgUrlaub{

  background-image: url("./../Bilder/Sonne.jpg");

}



#tile_blueh{

  background-image: url("./../Bilder/BluehQuadrat.jpg");

}



#imgBlueh{

  background-image: url("./../Bilder/Sonnenblume.jpg");

}



#tile_benthe{

  background-image: url("./../Bilder/Benthe_Portrait.jpeg");

}



#tile_helma{

  background-image: url("./../Bilder/Helma_portrait.jpg");

}



#tile_zohan{

  background-image: url("./../Bilder/Zohan_portrait.jpeg");

}



#tile_enno{

  background-image: url("./../Bilder/Enno_Portrait.jpeg");

}



#tile_sam{

  background-image: url("./../Bilder/Sam_portrait.jpeg");

}



#tile_frodo{

  background-image: url("./../Bilder/Frodo_portrait.jpeg");

}





/* Flexbox Größen */

@media screen and (min-width: 40em) {

  .cards {

    margin-top: -1em;

    display: flex;

    justify-content: flex-start;

    flex-wrap: wrap;

  }



  .centered .card {

    margin-bottom: 0.5em;

    margin-right: 0.5rem;

    display: flex;

    flex: 0 1 calc(33% - 0.5em);

  }



  .index .card {

    margin-bottom: 0.5em;

    margin-right: 0.5rem;

    display: flex;

    flex: 0 1 calc(50% - 0.5em);

  }

}



@media screen and (min-width: 60em) {

  .cards {

    margin-top: inherit;

  }



  .centered .card {

    margin-right: 0.5rem;

    margin-bottom: 0.5em;

    display: flex;

    flex: 0 1 calc(33% - 0.5em);

  }

  .index .card {

    margin-right: 0.5rem;

    margin-bottom: 0.5em;

    display: flex;

    flex: 0 1 calc(50% - 0.5em);

  }

}


.table-meat {
  width: 60%;
  min-width: 250px;
  font-family: "open Sans", regular;
  font-size: 16px !important;
  position:  left;
  border: none;
  margin-left: 1rem;
  margin-right: 1em;
  border-collapse: collapse;
}

.table-meat th, .table-meat td {
  padding: 12px 8px;
  border: none;
  text-align: left;
}

.table-meat td:last-child {
  text-align: right;
  width: 30%; 
}

.table-meat th:last-child {
  text-align: right;
}


table {

  width: 100%;

  border-collapse: collapse;

  font-family: "open Sans", regular;

  text-decoration: none;

  font-size: 13px;

}

th, td {

  border: 1px solid #000;

  padding: 0.4em;

  text-align: center;

}

.colspan {

  background-color: #f2f2f2;

}

.rowspan {

  background-color: #e6e6e6;

}

.smaller-text-size{

  font-size: 11px;

}

/*th, td:nth-child(1) {

  border-right: 3px solid #000;

}

td:nth-child(4) {

  border-right: 3px solid #000;

}

tr:nth-child(2) td:nth-child(2) {

  border-right: 3px solid #000;

}

tr:nth-child(2) {

  border-bottom: 3px solid #000;

}

tr:nth-child(1) {

  border-bottom: 3px solid #000;

}*/





/*********************************************************************************************Footer***********************************************************************/



footer {

  background-color: white;

  bottom: 0;

  border-top: 1px solid rgb(0, 0, 0);

  padding: 0 0 2vw 0;

}

.navunten {

  display: flex;

  justify-content: space-evenly;

  align-items: center;

  height: 1rem;

  margin-top: 1rem;

  overflow: hidden;

}



.navunten a {

  color: #000000;

  text-align: center;

  padding: 1px 16px;

  text-decoration: none;

  font-size: 15px;

}



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

  .navunten a{

    font-size: 4vw;

  }

}



.navunten a:hover {

  color: rgba(36, 102, 141, 0.637);

}



.navunten a.active {

  color: rgb(36, 102, 141);

  font-weight: bold;

}

.footertext {

  display: flex;

  justify-content: space-between;

  color: #000000;

  font-family: "Amatic SC", cursive;

  text-decoration: none;

  font-size: 12px;

}



/**** Insta Style ****/



.instalink {

  cursor: pointer !important;

  text-decoration: underline !important;

  color:blue !important;

}



.instalink:hover {

  text-decoration: none !important;

}