/* 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 -------------------------- */
.welpen-grid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 14% auto auto 1fr 1fr 1fr auto 1fr 1fr auto 1fr auto 10px;
  /* grid-template-rows: 14% auto 1fr 1fr 1fr 1fr auto auto auto; */
  grid-template-areas:
    "welpen-aufm"
    "welpen-head"
    "b-welpen-links"
    "b-welpen-mitte"
    "b-welpen-rechts"
    "b-welpen-gallerie"
    "a-welpen-links"
    "a-welpen-mitte"
    "a-welpen-rechts"
    "welpen-zitat"
    "welpen-accordion"
    "welpen-gallerie"
    "platzha-handy";
}
.welpen-aufm {
  grid-area: welpen-aufm;
  background-image: url('../img/welpen-aufm.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.welpen-head {
  grid-area: welpen-head;
  margin: 2rem;
  /* background-color: rgba(218, 165, 32, 0.2); */
}
.b-welpen-links {
  grid-area: b-welpen-links;
  margin: 0.5rem 2rem;
  padding: 2rem;
  padding: clamp(1rem, 3vw, 4rem);
  background-color: var(--color-gruen07);
  /*border: 1px solid silver;
  border-radius: 14px 0;*/
}
.a-welpen-links {
  grid-area: a-welpen-links;
  margin: 0.5rem 2rem;
  padding: 2rem;
  padding: clamp(1rem, 3vw, 4rem);
  background-color: var(--color-gruen07);
  /*border: 1px solid silver;
  border-radius: 14px 0;*/
}
.b-welpen-mitte {
  grid-area: b-welpen-mitte;
  margin: 0.5rem 2rem;
  padding: 0.6rem;
  /*border-radius: 10px;
  box-shadow: 5px 5px 10px gray;*/
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;

  display: flex;
  justify-content: left;
  align-items: end;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url("../img/ruediger.jpg");
  min-height: 240px;
}
.a-welpen-mitte {
  grid-area: a-welpen-mitte;
  margin: 0.5rem 2rem;
  padding: 0.6rem;
  /*border-radius: 10px;
  box-shadow: 5px 5px 10px gray;*/
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;

  display: flex;
  justify-content: left;
  align-items: end;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url("../img/Gimli.jpg");
  min-height: 240px;
}
.marker {
  background-color: var(--color-braun01);
  color: white;
  padding:0 0.4rem;
}

.b-welpen-rechts {
  grid-area: b-welpen-rechts;
  margin: 0.5rem 2rem;
  padding: 0.6rem;

  display: flex;
  justify-content: left;
  align-items: end;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url("../img/gretel03.jpg");
  min-height: 240px;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
}
.a-welpen-rechts {
  grid-area: a-welpen-rechts;
  margin: 0.5rem 2rem;
  padding: 0.6rem;

  display: flex;
  justify-content: left;
  align-items: end;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url("../img/gretel02.jpg");
  min-height: 240px;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
}
.b-welpen-gallerie {
  grid-area: b-welpen-gallerie;
  margin: 2rem 2rem 4rem;
  /*background-color: #ff8400;*/
}
.marker-bwelp {
  margin: 0 0 1.2rem;
  /*background-color: #f909bd;*/
}
.welpen-zitat {
  grid-area: welpen-zitat;
  margin: 2rem;
}
.welpen-zitat h2 {
  text-align: center;
}
.welpen-accordion {
  grid-area: welpen-accordion;
  margin: 2rem;
}
.welpen-gallerie {
  grid-area: welpen-gallerie;
  margin: 2rem;
}
/* ANCHOR platzhalter für handygroesse  ------------------------ */
.platzha-handy {
  grid-area: platzha-handy;
  height: 3px;
  width: 100%;
  background-color: #ffffff;
}

/* ANCHOR typo  ------------------------ */
.welpen-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;
}
.gallery-bwelp-mosaik {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

/* 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__ImageB,
.gallery__Image {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}
.gallery__ImageB:hover,
.gallery__Image:hover {
  opacity: .7;
}

/* ANCHOR responsive großer screen ---------------- */
@media (min-width: 992px) { 
  .welpen-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr auto 1fr auto auto auto ;
    grid-template-areas:
      "welpen-aufm welpen-aufm welpen-aufm"
      "welpen-head welpen-head welpen-head"
      "b-welpen-mitte b-welpen-links b-welpen-rechts"
      "b-welpen-gallerie b-welpen-gallerie b-welpen-gallerie"
      "a-welpen-mitte a-welpen-links a-welpen-rechts"
      "welpen-zitat welpen-zitat welpen-zitat"
      "welpen-accordion welpen-accordion welpen-accordion"
      "welpen-gallerie welpen-gallerie welpen-gallerie";
  }
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (min-width: 1260px) { 
  .welpen-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 15% 1fr 1fr 1fr 15%;
    grid-template-rows: 2fr auto 1fr auto auto auto;
    grid-template-areas:
      "welpen-aufm welpen-aufm welpen-aufm welpen-aufm welpen-aufm"
      ". welpen-head welpen-head welpen-head ."
      ". b-welpen-mitte b-welpen-links b-welpen-rechts ."
      ". b-welpen-gallerie b-welpen-gallerie b-welpen-gallerie ."
      ". a-welpen-mitte a-welpen-links a-welpen-rechts ."
      ". welpen-zitat welpen-zitat welpen-zitat ."
      ". welpen-accordion welpen-accordion welpen-accordion ."
      ". welpen-gallerie welpen-gallerie welpen-gallerie .";
  }
}
/* ANCHOR responsive iphone7 ---------------- */
@media (max-width: 467px) { 
  .welpen-grid {
    grid-template-rows: 10% auto 1fr 1fr 1fr auto;
  }
}