@charset "UTF-8";

*, *::before, *::after {
    box-sizing: border-box;
}

.header-content, .footer-content, {
    font-family: 'Arial Bold', Arial, sans-serif;
    font-weight: bold;
}

.revisionstext  {
    font-family: 'Arial Bold', Arial, sans-serif;
    font-weight: bold;
	font-size: 50px;
}

.text-bereich {
	font-family: 'Arial Bold', Arial, sans-serif;

}


/* - - - Header - - - */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
	height: 100%;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}



header {
	position: fixed;
	top: 0;
    background-color: #c7c8c6;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center; /* Verteilt die Inhalte auf beiden Seiten */
    align-items: center; /* Zentriert die Inhalte vertikal */
}

.header-content {
	display: flex;
    padding-left: 15px; /* Fügt Abstand auf der linken Seite hinzu */
    font-size: 50px;
    color: black;
	white-space: nowrap;
}

/* Rest des Codes bleibt unverändert */


header div {
	display: flex;
	justify-content: left;
	padding-left: 15px;
    align-items: center;
}

header nav {
    display: flex;
    justify-content: flex-end; /* Rechtsbündige Ausrichtung */
    width: 100%;
	padding-right: 10px;
	
}

header nav a {
	
	padding-right: 20px;
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    color: black; /* Farbe der Links */
	font-size: 18px;

}

header a:hover {
    color: grey; /* Farbe beim Hover */
}

.header-content {
    font-size: 50px; 
    color: black;
	padding-bottom: 20px;
	padding-top: 20px;
}

/* - - - Banner - - - */

main {
    width: 100%;
}

.title-image {
    height: calc(100vh); /* Subtrahiert die Header-Höhe von der vollen Bildschirmhöhe */
    overflow: hidden;
	
}

.title-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /*contain=ganzes bild sichtbar*/
	padding: 30px;
	opacity: 1;
    transition: opacity 0.5s; /* Glatte Übergänge */

}



.content {
    padding: 20px;
}


/* - - - Grid - - - */

.grid-layout {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px; /* Abstand zwischen den Grid-Items */
    margin: 10px; /* Außenabstand des Grid-Containers */
}


.grid-item {
    background-color: white; /* Beispielhafte Hintergrundfarbe */
    padding: 20px;
    aspect-ratio: 1.5 / 1; /* Verhältnis entsprechend 35mm Kleinbildfilm */
}

.grid-item img {
    width: 100%; /* Setzt die Breite des Bildes auf 100% des Grid-Items */
    height: 100%; /* Setzt die Höhe des Bildes auf 100% des Grid-Items */
    object-fit: cover; /* Schneidet das Bild zu, um es an den Container anzupassen, ohne das Seitenverhältnis zu verzerren */
}

/* - - - Text - - - */

.text-bereich {
    text-align: center; /* Zentriert den Text */
	background-color: #c7c8c6;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

.text-bereich h2 {
	padding-top: 20px;
}

.text-bereich a {
	text-decoration: none;
	color: black;
}

.text-bereich a:hover {
	color: grey;
	
	
}

/* - - - Grid - - - */

footer {
    background-color: #c7c8c6; /* Hintergrundfarbe des Footers */
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

.footer-content p {
    margin: 5px 0; /* Vertikaler Abstand zwischen den Zeilen */
}