/* --- style.css --- */

/* -- Google Fonts Import (Alternativ im HTML lassen) -- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

/* -- Globale Resets & Box Sizing -- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* -- Basis-Stile (Mobile First / Landing Page) -- */
html, body {
    height: 100%;
    width: 100%;         /* Breite hinzugefügt für Konsistenz */
    margin: 0;           /* Sicherstellen, dass Resets angewendet werden */
    padding: 0;          /* Sicherstellen, dass Resets angewendet werden */
    overflow: hidden;    /* Verhindert Scrollen auf der Landing Page */
    background-color: #f0f0f0; /* Heller Hintergrund für Landing Page */
    /* Body standardmäßig als Flex-Container für die SVG-Zentrierung */
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    /* Standard Textfarbe und Schriftart für den Body (wird ggf. überschrieben) */
    color: #333; /* Beispiel Standardfarbe */
    font-family: 'League Spartan', sans-serif; /* Beispiel Standardfont */
}

svg {
	/* Maximale Größe relativ zum Viewport */
    max-width: 95vw;  /* Maximal 95% der Viewport-Breite */
    max-height: 85vh; /* Maximal 85% der Viewport-Höhe (lässt Platz für "SOON") */
    /* Automatische Größe, um das Seitenverhältnis beizubehalten */
    /* Die Browser skalieren das SVG basierend auf viewBox und den max-Werten */
    width: auto;
    height: auto;
    /* Stelle sicher, dass es nicht überläuft (obwohl max-width/height das meist verhindern) */
    display: block; /* Verhindert manchmal unerwünschten Leerraum unter dem SVG */
}

/* Stile für Texte (angenommen aus style.css oder hier definiert) */
.fontCinzel { font-family: 'Cinzel Decorative', cursive; }
.fontLeague { font-family: 'League Spartan', sans-serif; }

svg .colorLogo {
	fill: rgba(192, 163, 97, 255); /* 'fill' für SVG-Textfarbe */
}

svg .fontLeague[stroke] {
	stroke: rgba(192, 163, 97, 255); /* 'stroke' für SVG-Textkontur */
}

/* -- Allgemeine Font- und Farbklassen -- */
.fontCinzel {
    font-family: 'Cinzel Decorative', cursive; /* Korrekter Fallback */
}

.fontLeague {
    font-family: 'League Spartan', sans-serif;
}

.colorLogo {
    fill: rgba(192, 163, 97, 1); /* Farbe aus der Media Query übernommen */
}

a {
	color: white;
	text-decoration: none;
}

p {
	font-family: 'Cinzel Decorative', cursive; /* Korrekter Fallback */
	width: 80vw;
	line-height: 1.3;
}

h1 {
	font-size: 48px;
	text-align: center;
	color: rgba(192, 163, 97, 1);
	padding-top: 50px;
}
	
main h1, main h2 {
	text-align: center;
}

h2 {
	color: rgba(192, 163, 97, 1);
	padding: 25px;
}

/* Überschreibe Body-Stile für Inhaltsseiten */
body {
	background-color: rgba(37, 33, 30, 1); /* Dunkler Hintergrund */
	color: white;                          /* Standardtextfarbe Weiß */
	font-family: 'Cinzel Decorative', cursive; /* Standard-Schriftart für Content */
	overflow: auto;                        /* Scrollen wieder erlauben */
	display: block;                        /* Flexbox-Zentrierung aufheben, normales Block-Layout */
}

#active {
	color: white;
}

p {
	font-size: 20px;
	font-family: 'League Spartan', sans-serif;
}

.kontakt {
	color: rgba(192, 163, 97, 1);
}

.kontaktdiv {
	border: 2px dotted rgba(192, 163, 97, 1);
	padding: 15px;
	margin: 15px auto; /* Zentriert die Box, wenn sie schmaler als der Parent ist */
	border-radius: 15px;
	width: 80vw;
	text-align: center;
}

.nav-list {
	position: relative;
	top: 5vh;
	text-align: center; /* Zentriert die Inline-Listenelemente */
	padding-left: 0; /* Entfernt möglichen Einzug der Liste */
}

.nav-list li {
	display: inline;    /* Elemente nebeneinander */
	list-style: none;
	padding: 0;
	margin: 0 15px; /* Besser als margin auf li und padding auf a zu mischen */
}

.nav-list a {
	text-decoration: none;
	color: rgba(192, 163, 97, 1);
	font-family: 'Cinzel Decorative', cursive; /* Korrekter Fallback */
	font-size: 25px;
	padding: 10px 0; /* Etwas vertikales Padding, kein horizontales, da margin auf li */
}

hr {
	border: none; /* Browser-Standard entfernen */
	height: 1px;  /* Höhe definieren */
	background-color: white; /* Farbe setzen */
	margin: 20px auto; /* Oben/Unten Abstand und zentrieren */
}

#hr1 { width: 90%; }
#hr2 { width: 55%; }

/* -- Ab 64em (ca. 1024px) -- */
@media screen and (min-width: 64em) {

    #hr1 { width: 45%; }
    #hr2 { width: 35%; }

    .kontaktdiv {
        width: 20vw; /* Deutlich schmaler auf großen Bildschirmen */
    }

    main {
        width: 40vw; /* Hauptinhalt schmaler */
		margin: auto;
    }

	p {
		width: 30vw;	
	}
  
}

/* -- Ab 80em (ca. 1280px) -- */
@media screen and (min-width: 80em) {
     main {
        max-width: 70em; /* Begrenzt die Breite des Inhalts innerhalb von center */
    }
}