/* Info:
		Vorschaubiler in 3.5x3.0 cm mit 150 dpi
	*/


body {
	color: white;
	background-color: black;
	margin: 0;
	box-sizing: border-box;
	font-family:Arial, Helvetica, sans-serif;
}
	
body *{
	box-sizing: border-box;
}

.banner{
	display:flex;
	justify-content: center;
}

/* Container mit einem 8-Spalten-Grid, das um die gesamte Homepage drum herum geht */
.flex-container {
	width: 100%;
	padding: 2%;
	display: grid;
    grid-template-columns: repeat(8, 1fr);
	justify-content: center;
    align-items: start;
}

/* Div-Container mit 8 Spalten im Grid breit - für Banner - zieht sich selbst auf volle Breite - sonst keine Funktion */
.flex-item-8Grid-Banner {
	grid-column: span 8;

	justify-self: stretch;
	align-self: stretch;
}

/* Div-Container mit 8 Spalten im Grid breit - alles enthaltene ist wraps/bricht um beim schmaler werden */
.flex-item-8Grid {
	grid-column: span 8;	/* Anzahl der Spalten, die es in der Breite im Grid einnimmt */
	padding: 10px;	/* Seitenabstand innerhalb des Containers */
	margin-top: 0px; /* Abstand des Containers nach oben */
	display: flex;
	flex-wrap: wrap;	/* Sorgt für Zeilumbruch, wenn Link-Bilder nicht nebeneinandere passen */
	
	justify-content: center;
	justify-self: center;
}


/* Social Media > Link Liste: Container um div.flex-item-link untereinanderen zu platzieren */
.link-column {
	display: flex;
	flex-direction: column;
	grid-column: span 8
}

.sectionTitle {
	min-height: 55px;
	max-height: 75px;
}

/* Div-Container mit 8 Spalten im Grid breit - Menue-Button bei Desktop-Ansicht */
.flex-item-menue_Desktop {
	background-color: #5964B9;
	grid-column: span 8;
	padding: 8px;
	margin-bottom: 32px;

	width: 100%;

	justify-self: center;
	
	display: block;	/* eingeblendet solange media max 600px nicht erreicht ist */
}

/* Div-Container mit 8 Spalten im Grid breit - Menue-Button bei Smartphone-Ansicht */
.flex-item-menue_Phone {
	background-color: #5964B9;
	grid-column: span 8;
	padding: 8px;
	margin-bottom: 32px;

	width: 100%;

	justify-self: center;
	
	display: none;	/* ausgeblendet solange media max 600px nicht erreicht ist */
}

/* Div-Container mit 2 Spalten im Grid breit - Menue-Button in Galerie (nur bei Desktop-Ansicht) */
.flex-item-menue_Galerie_Desktop {
	grid-column: span 2;
	align-self: start;
	width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* rechts anliegend*/
    justify-content: flex-start; /* oben anliegend */
	
	position: sticky;
    top: 20px;   /* Abstand zum oberen Fensterrand */
    align-self: start;
}

.flex-item-menue_Galerie_Desktop a {
    display: block;
}

/* Div-Container mit 6 Spalten im Grid breit - Inhalte in Galerie (verändert die Breite zwischen 6 und 8 Grid) */
.flex-item_Galerie_Inhalt {
	grid-column: span 6;
	padding: 8px;

}

/*Für kleine Bildschirme*/
@media (max-width: 600px) {

    .flex-item-menue_Galerie_Desktop {
        display: none;
    }

    .flex-item_Galerie_Inhalt {
        grid-column: span 8;
    }

}


.flex-item-headline{
	padding: 8px;
	font-size: clamp(1.2rem, 2vw, 1.6rem); /* Font-size so angepasst, dass es nicht maximal klein beim Zoomen werden kann */

	line-height: 1.8rem;

	justify-self: center;
	max-width:960px;
}

.flex-item-headline p:first-child{
	margin-top: 0;
}

.flex-item-text {
	padding: 8px;
	text-align: justify; /* Blocksatz */

	font-size: clamp(1.0rem, 2vw, 1.3rem); /* Font-size so angepasst, dass es nicht maximal klein beim Zoomen werden kann */
	
	line-height: 1.6rem;
	margin-inline: 32px;
	
	justify-self: center;
	max-width:960px;
}

.flex-item-text p:first-child{
	margin-top: 0;
}

/* sorgt dafür, wenn ein Bild über den Rahmen hinaus geht, dass das Grid-Raster danach keinen Float mehr hat */
.flex-item-text::after {
    content: "";
    display: block;
    clear: both;
}

/* Bild mit float versehen, dass der Text drum herum läuft - Bild steht rechts */
.bild-rechts {
    float: right;
    margin: 0 0 16px 20px; /* unten und links Abstand zum Text */
}

/* Bild mit float versehen, dass der Text drum herum läuft - Bild steht links */
.bild-links {
    float: left;
    margin: 0 20px 16px 0; /* unten und rechts Abstand zum Text */
}

.flex-item-text-bild {
    display: flex;
    align-items: flex-start;      /* Bild und Text beginnen oben */
    gap: 24px;                    /* Abstand zwischen Bild und Text */

    padding: 8px;
    margin-inline: 32px;

    max-width: 960px;
    justify-self: center;

    text-align: left;             /* statt Blocksatz */
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.6;
}

.flex-item-text-bild img {
    width: 30vw;
    min-width: 240px;
    max-width: 500px;
    height: auto;

    flex-shrink: 0;   /* Bild wird nicht zusammengedrückt */
}

.flex-item-text-bild .text {
    flex: 1;          /* Text nimmt den restlichen Platz ein */
}

@media only screen and (max-width: 700px) {
    .flex-item-text-bild {
        flex-direction: column;
        gap: 16px;
    }

    .flex-item-text-bild img {
        width: 100%;
        min-width: 200px;
        max-width: 500px;
        align-self: center;
    }
}




.flex-item-2 {
	padding: 6px;
	background-color: black;

	grid-column: span 2;

	justify-self: stretch;
	align-self: stretch;
}

.flex-item-3 {
	padding: 6px;
	background-color: black;

	grid-column: span 3;

	justify-self: stretch;
	align-self: stretch;
}

.flex-item-4 {
	padding: 6px;
	background-color: black;

	grid-column: span 4;

	justify-self: stretch;
	align-self: stretch;
}


.flex-item-2 img,
.flex-item-3 img,
.flex-item-4 img{
	border-radius: 3%;
	filter: brightness(1);
}

.flex-item-2 img:hover,
.flex-item-3 img:hover,
.flex-item-4 img:hover{
	filter: brightness(1.1);
}

/* Button für Navigationsmenue mit fester Größe */
.menue-button-Desktop{
	display: inline-flex;
}

.menue-button-Phone{
	display: inline-flex;
}

/* Button für Navigationsmenue - Größenangabe für Button mit Transformationseffekt */
.menue-button-Desktop img {
	height:42px;
	margin:6px;
	
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 10px;
	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.menue-button-Desktop:hover img {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.menue-button-Phone img {
	height:55px;
	margin:6px;
	
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 10px;
	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.menue-button-Phone:hover img {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

/* Button für Navigationsmenue Galerie/Tutorial - Größenangabe für Button mit Transformationseffekt */
.menue-button-Galerie {
    margin: 8px;
	
	background: #5263b2; /* Um äußere Rahmenfarbe zu ändern, hier und drunter border ändern*/
	border: 5px solid #5263b2;
	border-radius: 8px;
}

.menue-button-Galerie img {
		display: flex;
	height:46px;
		
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 8px;

	transition-property: transform;
  	transition-duration: 0.1s;	
}

.menue-button-Galerie:hover {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

@media (max-width: 900px) {

    .menue-button-Galerie img {
        height: 40px;
    }
}

@media (max-width: 770px) {

    .menue-button-Galerie img {
        height: 32px;
    }
}

.button_vorSchwarz{
	display: inline-flex;
	
	background: #5263b2; /* Um äußere Rahmenfarbe zu ändern, hier und drunter border ändern*/
	border: 5px solid #5263b2;
	border-radius: 8px;
}

.button_vorSchwarz img {
	height:50px;
	
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 8px;
	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.button_vorSchwarz:hover {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

/* Klasse für Bilder mit Text */
.link-Kombi-Bild-Text {
   /* width: 90px;  */        /* gleiche Breite wie das Bild */
   	display: inline-flex;
}

.link-Bilderkombi {
    display: flex;
    flex-direction: column;
    align-items: center;
	
	margin: 6px;
	
	background: #5263b2; /* Um äußere Rahmenfarbe zu ändern, hier und drunter border ändern*/
	border: 5px solid #5263b2;
	border-radius: 8px;

    text-decoration: none;
    color: inherit;
	font-family:Arial, Helvetica, sans-serif;
	
}

.link-Bilderkombi img {
	min-height: 150px;
	max-height: 225px;
	
	column-gap: 50px;
	
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 8px;
	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.link-Bilderkombi:hover {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.link-Bilderkombi span {
    margin-top: 6px;
    font-size: 0.85rem;
    text-align: center;
}



/* Social Media-Link-Button */
.linkimg{
	display: inline-flex;

}

.linkimg img {
	margin:6px;
	min-width: 224px;
	max-width: 300px;
	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.linkimg:hover img {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

/* Galerie-Illustrationen-Button */
.galerieimg{
	display: inline-flex;
    margin: 6px;
	background: #5263b2; /* Um äußere Rahmenfarbe zu ändern, hier und drunter border ändern*/
	border: 5px solid #5263b2;
	border-radius: 8px;
}

.galerieimg img {
	margin: 1px;
    width: 90px;
    height: auto;
	
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 8px;

	transition-property: transform;
  	transition-duration: 0.1s;
}

.galerieimg:hover {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.gallery{
	display: flex;
}

.link,
.link:visited{
	color: #5964B9;
}

.link:hover,
.link:focus{
	color: #e7effb;
}

.jahres-button {
    position: relative;
    display: inline-block;
	margin-bottom: 10px;
	
	background: #5263b2; /* Um äußere Rahmenfarbe zu ändern, hier und drunter border ändern*/
	border: 5px solid #5263b2;
	border-radius: 8px;
}

.jahres-button img {
    display: block;
	height: 50px;
	
	border: 3px solid black; /* Innere Rahmen */
	border-radius: 8px;
}

.jahres-button .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.jahres-button:hover .hover {
    opacity: 1;
}



/*Für kleine Bildschirme*/
@media only screen and (max-width: 600px) {
	.banner{
		overflow: clip; /* wird beim kleiner werden der Seite abgeschnitten */
	}
	
	.banner img{
		min-width: 480px; /* img kann nicht kleiner werden als diese Größe */
	}
	
	.button img {
		height: 36px;
	}
	
}

.footer {
	justify-self: stretch;	
}

.footer .flex-item-text{
	width: 100%;
	max-width: 100%;
	text-align: center;
}


@media only screen and (max-width: 600px) {
	
	.flex-item-menue_Desktop	{
		display: none;
	}
	
		.flex-item-menue_Phone	{
		display: block;
	}
		
}

/*Für kleine Bildschirme*/
@media only screen and (max-width: 480px) {
	.flex-item-text{
		margin-inline: 16px;
	}
}

/*Für sehr kleine Bildschirme*/
@media only screen and (max-width: 320px) {
	.flex-container {
		padding: 0;
	}
}