/* ANCHOR var Farben -------------------------- */ 
body {
  --color-gruen01: #3e5e07;
  --color-gruen02: #5b7d22;
  --color-gruen03: #82a647;
  --color-gruen04: #b0d571;
  --color-gruen05: #d6fb94;
  --color-gruen06: #e9ffc1;
  --color-gruen07: #f5ffe2;
  --color-orange: #ffa200;

  --color-braun01: #271b00;
  --color-braun02: #3a2e12;
  --color-braun03: #51452a;
  --color-braun04: #665a3e;
  --color-braun05: #84775a;
  --color-braun06: #9d9073;
  --color-braun07: #b9ac8e;
  --color-braun08: #d7caab;
  --color-braun09: #efe2c3;
  --color-braun10: #fff2d1;

  --color-grau01: #2e2e28;
  --color-grau02: #3e4038;
  --color-grau03: #5f625a;
  --color-grau04: #7c8178;
  --color-grau05: #99a095;
  --color-grau06: #bac2b6;
  --color-grau07: #d6e1d3;
}

/* ANCHOR Haupt Gridcontainer -------------------------- */
.ellie-grid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 14% auto 1fr 1fr 2fr auto auto;
  grid-template-areas:
    "ellie-aufm"
    "ellie-head"
    "ellie-links"
    "ellie-rechts"
    "ellie-freist"
    "ellie-zitat"
    "ellie-gallerie";
}
.gretel-aufm {
  grid-area: ellie-aufm;
  /* background-color: brown; */ 
  background-image: url('../img/gretel-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.dudel-aufm {
  grid-area: ellie-aufm;
  /* background-color: brown; */ 
  background-image: url('../img/dudel-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.adolar-aufm {
  grid-area: ellie-aufm;
  /* background-color: brown; */ 
  background-image: url('../img/adolar-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.aennel-aufm {
  grid-area: ellie-aufm;
  /* background-color: brown; */ 
  background-image: url('../img/aennel-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.ellie-aufm {
  grid-area: ellie-aufm;
  /* background-color: brown; */ 
  background-image: url('../img/ellie-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.ellie-aufm-welpen {
  grid-area: ellie-aufm;
  background-image: url('../img/welpen-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.ellie-head {
  grid-area: ellie-head;
  margin: 2rem;
  /* background-color: rgba(218, 165, 32, 0.2); */
}
.ellie-links {
  grid-area: ellie-links;
  margin: 2rem;
  padding: 2rem;
  padding: clamp(1rem, 3vw, 4rem);
  background-color: var(--color-gruen07);
}
.ellie-rechts {
  grid-area: ellie-rechts;
  margin: 2rem;
  padding: 2rem;
  padding: clamp(1rem, 3vw, 4rem);
  background-color: var(--color-gruen07);
}
.ellie-freist {
  grid-area: ellie-freist;
  margin: 2rem 0; 
  /* padding: clamp(1rem, 3vw, 4rem); */
  background-color: rgba(128, 128, 0, 0.199);
}
.freist-img {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.gretel-freist-img {
  background-image: url("../img/gretel_mitte.jpg");
}
.aennel-freist-img {
  background-image: url("../img/aennel-mitte.jpg");
}
.adolar-freist-img {
  background-image: url("../img/adolar-mitte.jpg");
}
.dudel-freist-img {
  background-image: url("../img/dudel-mitte.jpg");
}
.ellie-freist-img {
  background-image: url("../img/ellie-mitte.jpg");
}
.ellie-zitat {
  grid-area: ellie-zitat;
  margin: 2rem;
}
.ellie-zitat h2 {
  text-align: center;
}
.ellie-gallerie {
  grid-area: ellie-gallerie;
  margin: 2rem;
  /*background-color: rgba(102, 51, 153, 0.15);*/
}
/* ANCHOR typo  ------------------------ */
.ellie-grid h3 {
margin-bottom: 0.5rem;
}
.body-fett {
  color: var(--color-gruen01);
}

/* ANCHOR ellie-galerie ------------------------ */
/* First the Grid */
.gallery {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 0.2rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}

/* The Picture Frame */
.gallery_klein {
  padding: 0;
  font-size: 1rem;
  text-align: center;
  background-color: var(--color-braun04);
  color: var(--color-braun09);
}

/* The Images .gallery-img */
.gallery__Image {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.gallery__Image:hover {
  opacity: .7;
}

/* ANCHOR responsive großer screen ---------------- */
@media (min-width: 992px) { 
  .ellie-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr auto auto ;
    grid-template-areas:
      "ellie-aufm ellie-aufm ellie-aufm"
      "ellie-head ellie-head ellie-head"
      "ellie-links ellie-freist ellie-rechts"
      "ellie-zitat ellie-zitat ellie-zitat"
      "ellie-gallerie ellie-gallerie ellie-gallerie";
  }
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ANCHOR responsive iphone7 ---------------- */
@media (max-width: 467px) { 
  .ellie-grid {
    grid-template-rows: 10% auto 1fr 1fr 1fr auto;
  }
  .ellie-freist-img {
    height: 300px; 
  }
}