body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #FF0080; /* Generelle TEXTFARBE */
	
	/* Links */
	a {
	  color: #FF0080; 
	  text-decoration: none; /* Unterstreichung entfernen */
	}

	/* Link bei Mouseover */
	a:hover {
	  font-weight: bold; /* Fett beim Hover */
	}
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    display: grid;
    grid-template-columns: 30% 40% 30%; /* 3 Spalten */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
	
	h1 {
	  color: #FF0080; 
	  font-size: 60px; 
	}
}
/* Default ausgeblendet */
.header-top {
    display: none;
}

.header-middle {
	display: flex;
    align-items: center;
	justify-content: center;
}

.header-left {
    display: flex;
    align-items: center;
	padding-left: 25px;
    justify-content: flex-start; /* sorgt für linkssbündige Ausrichtung */
    text-align: left;         /* Text zusätzlich links ausrichten */
}
.header-right {
    display: flex;
    align-items: center;
	padding-right: 25px;
    justify-content: flex-end; /* sorgt für rechtsbündige Ausrichtung */
}

/* Boxen: Abstand zum Fixed Header */
.spacer {
    height: 160px;
}

/* MAIN SECTION */
.main {
    background: url('../images/background.jpg') no-repeat center/cover;
    padding: 40px;
	padding-bottom: 200px;
}

/* 2 SPALTEN LAYOUT */
.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 150px; /* MEHR ABSTAND ZWISCHEN BEIDEN SPALTEN */
}

/* BOXEN */
.box {
    background: white;
	padding-top: 1px;
    padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 1px;
    margin-bottom: 20px;
}

/* FOOTER */
.footer {
    background: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
	
}


/* RESPONSIVE: Wenn Breite weniger als 800px (Mobile) */
@media (max-width: 800px) {

	.header {
		position: fixed;
		top: 0;
		width: 100%;
		background: white;
		display: grid;
		grid-template-columns: 50% 50%; /* 2 Spalten */
		grid-template-rows: auto auto;
		padding: 3px 3px; /* leicht reduziert */
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 1000;
		h1 {
		  color: #FF0080; 
		  font-size: 46px; 
		}
	}

	.header-top {
		display: flex;
		grid-column: 1 / 4;
		font-size: 12px;       /* kleiner Text */
		padding-right: 3px;        /* weniger Höhe */
	}
	.header-middle {
		display: none;
	}
	
	.header-left {
    display: flex;
    align-items: center;
	padding-left: 5px;

	}
	.header-right {
		display: flex;
		align-items: center;
		padding-right: 5px;
	}

	.spacer {
		height: 290px;
	}
	
	/* MAIN SECTION */
	.main {
		background: url('../images/background.jpg') no-repeat center/cover;
		padding: 40px;
		padding-bottom: 40px;
	}
    .content {
        grid-template-columns: 1fr;
		gap: 0px;
    }
	
}