* {
  box-sizing: border-box;
}


/*  S  e i t e n h i n t e r g r u n d f a r b e  */
body { 
  height: auto;
  margin: 1em; 
  background: #83995D;	     /* #72884C; */	 /* #A9BB83; */	 /* #556B2F; */
}

.bgColored {
  background-color: #F5F5F5; /* #fffaf0; */
}

.bgPictured {
  /* ... image used								 */
  /* background-image: url("../conferencier/pictures/20220309_140703.web.jpg");	 */
  background-image: url("../conferencier/pictures/20220309_140627.web.jpg");	 


  background-size: cover;
  background-color: rgba(255,255,255,0.6);
  background-blend-mode: lighten;
}

/*  W o r k i n g   Z o n e  */

.hintDiv {
  display: grid;

		  /* next statement based in earlier days... */
		  /*  grid-template-columns: repeat(autofill, (minmax(200px, 1fr))); */
  
		  /* This is better for small screens, once min() is better supported */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  grid-auto-flow: row;
 
  gap: 1em;

  background-color: #bf6a4d;
  color: gold;
  
}
/*  E n d e:  Working Zone */



/*  S  c  h  r  i  f  t  b  i  l  d  */
.infofont {
  color: #2D2D2D;
  font-family: Maranatha, Georgia, Garamond, Times, serif;
  font-size: 17px; /* 1em; */
}

.font_intro_title {
  font-family: SymphonieCAT, Georgia, Garamond, Times, serif; 		 /* Tangerine_Bold;		     */
  font-size: 4em;
  font-style: italic;
  text-shadow: 2px 2px 5px darkseagreen; /* orange; goldenrod; palegoldenrod */
}


.font_intro_title > h1 {
  font-size: 1em;
  font-weight: initial; 
}
 
.p_title_h1 {
  font-family: Maranatha, Georgia, Garamond, Times, serif;
  font-size: 1.8em;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: #627548;
}

.p_title_h2 {
   margin-top: -0.7em;
 }
 
.font_intro_text {
  font-family: Maranatha, Georgia, Garamond, Times, serif;
  font-size: 1.3em;
  font-style: italic;
  text-shadow: 2px 2px 5px darkseagreen; /* orange; palegoldenrod */
}

.font_rental_paragraph_title {
  font-family: Maranatha, Georgia, Garamond, Times, serif; 		 /* Tangerine_Bold;		     */
  font-size: 1.2em;
  									/*  font-style: italic;		     */
  text-shadow: 2px 2px 5px darkseagreen; /* orange; goldenrod; palegoldenrod */
}


/* Hoehe fuer Artikel */
.section {
   height: 100%;
}


/*  g r i d  */
.grid {
  display: grid;

		  /* next statement based in earlier days... */
		  /*  grid-template-columns: repeat(autofill, (minmax(200px, 1fr))); */
  
		  /* This is better for small screens, once min() is better supported */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  grid-auto-flow: row;
 
  gap: 1em;
}

.gallery {
  display: grid;

		  /* next statement based in earlier days... */
		  /*  grid-template-columns: repeat(autofill, (minmax(200px, 1fr))); */
		  
		  /* This is better for small screens, once min() is better supported */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  grid-auto-flow: dense;
 
  gap: 1em;
  
}

.grid > p {
  color: darkslategrey;             /*  darkgreen;  #a56565; #2D2D2D; */
  background-color: #fffaf0;    /* #F5F5F5; */
  border-radius: 7px;
  padding: 0.5em;
}

.grid > introtext {
  color: #a56565;		/* #2D2D2D; */
  padding: 0.5em;
}

.paragraph > p {
  background-color: lightgrey;
}

.legalHint {
	border: inset;
	border-color: lightgray;
	padding: 0.2em;
}

/* https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/ */

.gallery > figure > img {
  width: 100%;

}

.gallery > figure > figcaption {
  position: relative;
  bottom: 3.6rem;
  background-color: rgba(142, 133, 133, .7);
  width: 100%;
}

.gallery > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1rem;
}

ul.para {
  list-style-type: square;
}