/* CSS für alle Register */
:root{
	--nav-height: 64px;
	--accent: #0b74de;
	--bg: #000000;
	--card: rgba(0,0,0,0.50);
	--text: #ffffff;
}

/* Parameter für die ganze Website */
html{
	scroll-behavior:smooth
}

/* Layoutparameter */
html,body{
	height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;color:var(--text);background:var(--bg)
}

/* Parameter für Header */
header{
	position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:linear-gradient(180deg,rgba(0,0,0,1.00),rgba(0,0,0,0.00));/*backdrop-filter:blur(4px);*/display:flex;align-items:center;justify-content:space-between;padding:0 1rem;box-shadow:0 1px 6px rgba(0,0,0,0.06);z-index:1000;
}

nav span{
	display:flex;align-items:center;gap:.5rem;font-weight:600
}

/* Parameter für Navigationsleiste im Header */
nav ul{
	list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center
}
nav a{
	display:inline-block;padding:.5rem .6rem; /* border-radius:6px; */text-decoration:none;color:inherit;font-weight:500
}
nav a:hover, nav a:focus{
	background:rgba(11,116,222,0.08);outline:none
}

.nav-toggle{
	display:none;border:0;background:transparent;font-size:1.1rem;padding:.4rem;border-radius:6px
}

/* Dropdown für kleinere Geräte */
@media (max-width:640px){
	nav ul{
		position:fixed;top:var(--nav-height);left:0;right:0;background:var(--card);flex-direction:column;padding:0.5rem;border-bottom-left-radius:12px;border-bottom-right-radius:12px;box-shadow:0 6px 18px rgba(17,17,17,0.08);transform-origin:top;transform:scaleY(0);transition:transform .18s ease-in-out;visibility:hidden
	}
	nav ul.open{
		transform:scaleY(1);visibility:visible
	}
	.nav-toggle{
		display:inline-block
	}
}

/* Platzhalter um oberen Inhalt nicht zu verdecken */
main{
	/*padding-top:calc(var(--nav-height) + 1rem);*/max-width:1000px;margin:0 auto;padding-left:1rem;padding-right:1rem
}

/* Parameter für Sektionen */
section{
	margin:1rem 0;padding:1.2rem;padding-top:0.6rem;/*background:var(--card);border-radius:12px;*/
}

/* Parameter für erste Sektion für überlappungseffekt */
section:first-of-type{
    background:var(--card);border-radius:100px;padding-top:5px;
}

section h1{
	text-align:center;margin-top:15px;margin-bottom:30px
}

section div h2{
	text-align:center
}

/* Klasse für geteilte Sektionen */
.double-box {
    display: flex;
    justify-content: space-between; /* auseinander */
    gap: 1rem; /* Abstand zwischen den Boxen */
    align-items: flex-start; /* oben ausrichten */
}

/* Jedes Kind-Div bekommt eigene unabhängige Box */
.double-box > div {
    /*flex: 1; */
    /*background: rgba(0,0,0,0.50);*/
    padding: 1rem;
    /*border-radius: 8px;*/
}

/* Parameter für Footer */
footer{
	text-align:center
}

/* Hero Bild oben */
.hero {
    position: relative;
    width: 100%;
    height: 60vh;        /* Höhe des Bildbereichs */
    overflow: hidden;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Bild füllt den Bereich */
    display: block;
}

/* Sektionen leicht über das Bild schieben */
main {
    position: relative;
    z-index: 2;
}

a.linkdecooff {
	text-decoration:none
}