/* Erstmal ein paar Schriftarten laden: indie flower für die Überschrift und DM Sans für normalen Text */
@font-face{font-family:"indie flower";font-style:normal;font-weight:400;font-display:fallback;src:url('Schriftarten/indie_flower.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"pacifico"    ;font-style:normal;font-weight:400;font-display:fallback;src:url('Schriftarten/Pacifico.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:fallback;src:url('Schriftarten/DMSans-Regular.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:fallback;src:url('Schriftarten/DMSans-Medium.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:fallback;src:url('Schriftarten/DMSans-Bold.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-display:fallback;src:url('Schriftarten/DMSans-Italic.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:500;font-display:fallback;src:url('Schriftarten/DMSans-MediumItalic.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:700;font-display:fallback;src:url('Schriftarten/DMSans-BoldItalic.woff2') format('woff2');font-stretch:normal;}


/*  ==================== generelle Festlegungen für die gesamte Seite =========================================================================== */

/* Variablen setzen */
:root {
  
  /* https://enzedonline.com/en/tech-blog/create-responsive-font-sizes-based-on-the-viewport/ */
  /* minimale Bildsschirmbreite: 433px - 1263 */
  --farbe-hintergrund: #083924; /* grün im Kopf und im Fuß*/
  --rundeEcke: 20px; /* die DIVs sollen runde Ecken mit diesem Radius haben */
  --AbstandBereiche: 40px; /* Damit werden die Bereiche Termine, Berichte und Bilder voneinander abgegrenzt durch etwas Abstand */
  --AbstandInhaltsboxen: 10px; /* Abstand der Inhaltskästen zueinander */
}




* {
  box-sizing: border-box;  /* bewirkt, dass z.B. ein DIV mit width:200px tatsächlich 200px breit ist, ohne diese Angabe müsste man noch padding und border subtrahieren werden */
  margin:0; padding:0;  /* generell möchte ich keine Ränder haben, es sei denn ich gebe sie an */
  /* generelle Texteinstellungen */
  font-family: "DM Sans", "sans-serif";  /* immer DM sans, aber sollte das nicht geladen werden können, dann irgendeine serifenlose Schriftart */
  color: white;       /* Textfarbe generell weiß */
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  }

body { background: #0c2109 url(Deutsche_Wyandotte_rebhuhnfarbig_gebaendert_web_.jpg)  no-repeat fixed;
       background-position: center center;
       /* folgende 3 Zeilen sind dazu da, dass der Footer immer am unteren Bildschirmrand hängt, falls das Fenster nicht ausgefüllt ist */
       min-height: 100vh; /* damit füllt body in der Höhe auch große Monitore immer bis ganz nach unten aus */
       display: flex;
       flex-direction: column;
     }

/*  ==================== Beginn CSS Kopfzeile (Header) ========================================================================================= */

/* Style the header - Kopfzeile bestehend aus einem Bild links neben dem Text
   Bild und Text sollen sich dynamisch an die Bildschirmgröße anpassen.
   Das Bild soll in der Höhe vertikal zentriert neben dem Text stehen.
 */
header {
  display: flex;  /* nur dadurch wird das Bild vertikal zum nebenstehenden Text zentriert */
  background-color: var(--farbe-hintergrund);
  border-radius: 0 0 var(--rundeEcke) var(--rundeEcke);  /* runde Ecken, aber nur unten */
}

.header-bild {
  width: 10%; /* Das DIV mit dem Bild soll 20% von der gesamten Bildschirmbreite bekommen */
  margin:  auto 0 auto 0;  /* den DIV-Container mit dem Bild neben dem Text vertikal zentrieren, funktioniert im Zusammenspiel mit display:flex im übergeordneten DIV */
}

.header-ueberschrift {
  width: 80%;            /* Das DIV mit dem Ueberschriftstext soll 80% von der gesamten Bildschirmbreite bekommen */
  margin: auto 0 auto 0; /* den DIV-Container mit dem Text neben dem Bild vertikal zentrieren, funktioniert im Zusammenspiel mit display:flex im übergeordneten DIV */
}

.header-bild img {width:100%; max-width:115px;} /* Das Bild soll das DIV immer zu 100% ausfüllen, jedoch nicht über seine eigenen Maximalmaße hinauswachsen und dann verpixelt aussehen */

.header-ueberschrift h1 {margin: 0.1vw 0 1.2vw 0; /* etwas Abstand nach oben und unten, damit die Schrift bei bestimmten Bildschirmbreiten nicht überläuft */
                         font-size: min(6.00vw, 50px); line-height: min(6.10vw, 60px); /* dynamische Textgröße, je nach Bildschirmbreite, vw = Viewport = Fensterbreite des Browsers: 1vw = 1% der Viewportbreite. Bsp.: Ist der Viewport 50cm breit, dann bedeutet 1vw = 1% von 50cm = 0.5cm. */
                         font-family: "indie flower";   /* spezieller Schriftart für die Überschrift: indie flower, pacifico */
                         color: #f3ea0e;  /* gelbe statt weiße Schrift */
                         }

/*  ==================== Ende CSS-Header ==== Beginn Inhalt ================================================================================== */
main {}

main h2 {
	background-color: rgba(10,10,10,0.9);  /* black; */  /* hsl(220 80% 90%); */
    border-radius: 20px 20px 0px 0px; /* var(--rundeEcke);  /* runde Ecken */
    margin: var(--AbstandBereiche) auto 0px auto;   /* auto = Überschriften zentrieren, var... = Abstand vor und nach der h3-Überschrift */
    padding: 10px 20px 10px 20px;    /* links und rechts mehr Rand für die Rundung der Hintergrundfarbe */
    font-size: 30px;
    line-height: 28px;
    width: 90%;                   /* ohne diese Angabe findet kein Zeilenumbruch bei langen Überschriften statt, und 90% statt 100% damit der Hintergrund nicht so breit ist wie das DIV mit dem Text darunter, Überschriften haben nur oben runde Ecken, unten nicht, und das sieht bei 100% blöd aus, wenn die Ecken bis an den Rand reichen */
    max-width: max-content;        /* Hintergrund max. so breit wie der Text tatsächlich ist */
    font-family: "indie flower";
    }
    
main h3 {    
    font-size:   20px;
    line-height: 26px;
    /* font-size: min(3.50vw, 20px); line-height: min(5vw, 26px); */
    }

.AbschnittTermine {    /* ------------------------ Formatierung der Termine ---------------------------------------------------------- */
	display: grid;
	gap: var(--AbstandInhaltsboxen);  /* Abstand zwischen den Terminkästen */ 
    /* grid-template-columns: repeat(auto-fill, minmax(21em, 1fr));  /* 1 fr = eine Boxbreite */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));     /* max 320px für KKM2-Handy, nicht größer ! */
    /* grid-template-rows: 80px 80px 80px; */
    /* align-content:center; justify-content: space-between;   /* ohne Wirkung wegen grid-template... */
    /* align-items:center; /* damit werden die Terminkästen nur so groß wie der Inhalt ist und vertikal zentriert */
    justify-content: center;  /* center oder space-evenly oder space-around */
    /* Anleitung: https://www.mediaevent.de/css/grid-repeat.html
    grid-template-columns: 300px 300px 300px    <-- 3 Spalten
    grid-template-columns: repeat(2, 60px 3fr) 120px;  <--- 5 Spalten: denn wiederhole 2x 60px 3fr und die 5.Spalte ist 120px breit
    

    */
}

.einzelnerTermin {
	padding: 1rem;
	background-color: rgba(10,10,10,0.9);  /* black; */  /* hsl(220 80% 90%); */
    border-radius: var(--rundeEcke);  /* runde Ecken */
}

.einzelnerTermin h3 {
	margin: 0 0 1.3rem;
	line-height: 1em;
}


ol li, ul li {text-align: left;}   /* Aufzählungen, egal welcher Art sollen immer linksbündig sein */
ol, ul {display:inline-block; margin-left:15px;}   /* inline-block: die Blockgröße wird automatisch an den (Text-)Inhalt angepasst, 
                                                                    damit kann man diese Blöcke zentrieren
                                                      margin-left: Aufzählungen etwas einrücken, zudem sollen sie nicht links über den Rand hinausragen */
/* -> notfalls wie folgt nur für die Rundschreiben anwenden:  .Rundschreiben .zweispaltig ul li {text-align: left;}

.AbschnittBerichte { }  /* ------------------------ Formatierung der Berichte -------------------------------------------------------- */
.Bericht {   /* die einzelnen Berichte */
	background-color: rgba(10,10,10,0.9);  /* black; */  /* hsl(220 80% 90%); */
    border-radius: var(--rundeEcke);  /* runde Ecken */
}

.Bericht:nth-of-type(n+2) { /* alle Berichte außer dem Ersten .... */
    margin-top:var(--AbstandInhaltsboxen);   /* alle Berichte halten voneinander Abstand */
} 

/* macht langen Text zweispaltig auf breiten Bildschirmen für bessere Lesbarkeit */
.AbschnittBerichte .zweispaltig {column-width: 400px; column-rule-color: silver; column-rule-width: 1px;  column-rule-style: dotted; }

/* Datenschutzerklärung */
.AbschnittBerichte .zweispaltig .datenschutzerklaerung h3 {margin-top:1.3rem;}
.AbschnittBerichte .zweispaltig .datenschutzerklaerung h4 {margin-top:1.1rem;}






.AbschnittBilder {   /* ------------------------ Formatierung der Bilder -------------------------------------------------------- */
  margin: 0 auto 10px auto;  /* zentrieren */
  padding: 0 10px 10px 10px;  /* bissel Rand drum */
  background-color: rgba(10,10,10,0.9);  /* schwarzer Hintergrund, leicht transparent */
  border-radius: var(--rundeEcke);  /* runde Ecken */
  max-width: 500px;
  width: 99.9%; /* max-content; /* schwarzer Hintergrund bzw. DIV nur so groß wie der Inhalt */
  }

.Gallerie {
  --size: 10em; /* control the size */
  --gap: 0.5em;   /* control the gap */
  --zoom: 2.0;    /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  width: 100%;      /* 50vw; /* calc(3*var(--size) + 2*var(--gap)); */
  aspect-ratio: 1;
  grid-template-columns: repeat(2,auto);
  min-height: 50vh;
}

.Gallerie figure {
  margin: 0;
  padding: 0;
  position: relative;
}

.Gallerie figcaption {  /* Bildbeschreibung unsichtbar */
	position: absolute;
  	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
  	opacity: 0;
	color: white;
	background: rgb(0 0 0 / 0.3);	
}

.Gallerie > figure img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;  /*  Bilder werden zugeschnitten, damit sie reinpasen und das gleiche Format haben; siehe: https://www.html-seminar.de/css-object-fit-object-position.htm */
  object-position: center 0;  /* zeige den oberen Bildrand (Köpfe der Hühner) und lasse die Füße in der Vorschau weg; siehe: https://www.html-seminar.de/css-object-fit-object-position.htm */
  cursor: pointer;
  transition: .35s linear;
}

 
#lightbox {     /* für Bildvergrößerung mittels JavaScript */
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  display: none;
}

#lightbox.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lightbox img {
  max-width: 90%;
  max-height: 80%;
  padding: 4px;
  background-color: black;
  border: 2px solid white;
}



/*  ==================== Ende Inhalt ==== Beginn Footer ================================================================================== */
footer {
  margin-top: auto;  /* bewirkt im Zusammenspiel mit den 3 Zeilen im body, dass der Footer immer am unteren Bildschirmrand hängt, falls das Browserfenster nicht komplett mit Inhalt ausgefüllt ist (vor allem bei großen Bildschirmen bei wenig Inhalt */
  background-color: var(--farbe-hintergrund);
  border-radius: var(--rundeEcke) var(--rundeEcke) 0 0;  /* runde Ecken, aber nur oben */
  /* padding-bottom: 0px; /* Krücke/Notbehelf, sonst sieht man unter der Fußzeile einen Leerbereich */
  }

footer a, footer p {color:white;
    line-height: 16px;     /* bewirkt 2 Dinge: Abstand zwischen den Textzeilen der Adresse auf kleinen Bildschirmen und Abstand zum oberen Rand des Footers */
    font-size: 14px;       /* kleinere Schrift als üblich */
}

footer .Adresse {
    margin-bottom: 10px;   /* etwas Abstand zwischen Adresse und den Links zum Impressum und Datenschutz */
}
footer .Impressum {
    margin-bottom: 10px;  /* etwas Abstand zwischen Adresse und den Links zum Impressum und Datenschutz */
}

footer .letzteAenderung {  /* Datum der letzten Änderung an der Homepage */
    font-size: 10px;       /* kleinere Schrift als üblich */
    }