/* Grundlegende Stileinstellungen */

@font-face {
    font-family: 'Autumn Chant';
    src: url('/fonts/AutumnChant.eot');
    src: url('/fonts/AutumnChant.eot?#iefix') format('embedded-opentype'),
        url('/fonts/AutumnChant.woff2') format('woff2'),
        url('/fonts/AutumnChant.woff') format('woff'),
        url('/fonts/AutumnChant.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Romantics';
    src: url('/fonts/NewRomantics.eot');
    src: url('/fonts/NewRomantics.eot?#iefix') format('embedded-opentype'),
        url('/fonts/NewRomantics.woff2') format('woff2'),
        url('/fonts/NewRomantics.woff') format('woff'),
        url('/fonts/NewRomantics.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    background: url('/images/bg.jpg') repeat;
    color: #000000;
}

/* Header-Stile */
.header {
    display: flex;
    align-items: left;
	height: 900px;
    padding: 0px;
    background: url('/images/bg.jpg') repeat;
	background-color: rgba(229, 194, 203, 0.9); /* Hintergrundfarbe mit Transparenz */
}

.header .nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-family: 'New Romantics', sans-serif;
    transition: color 0.3s;
}

.header .nav a:hover {
    color: #9ec3ef;
}

.header .navi-network a {
	background: url('/images/network.jpg');
	position: absolute; /* Positionierung ermöglichen */
	top: 598px;
	left: 1053px;
	width: 183px; /* Breite des Hintergrundbildes */
	height: 44px; /* Höhe des Hintergrundbildes */
	display: block; /* Das <a>-Element als Block darstellen */
	text-indent: -9999px; /* Text ausblenden, wenn nur das Bild sichtbar sein soll */
}

.header .navi-network a:hover {
    background: url('/images/network-hover.jpg');
}

.header .navi-domain a {
	background: url('/images/domain.jpg');
	position: absolute; /* Positionierung ermöglichen */
	top: 648px;
	left: 951px;
	width: 177px; /* Breite des Hintergrundbildes */
	height: 47px; /* Höhe des Hintergrundbildes */
	display: block; /* Das <a>-Element als Block darstellen */
	text-indent: -9999px; /* Text ausblenden, wenn nur das Bild sichtbar sein soll */
}

.header .navi-domain a:hover {
    background: url('/images/domain-hover.jpg');
}

.header .navi-exit a {
	background: url('/images/exit.jpg');
	position: absolute; /* Positionierung ermöglichen */
	top: 738px;
	left: 1012px;
	width: 119px; /* Breite des Hintergrundbildes */
	height: 46px; /* Höhe des Hintergrundbildes */
	display: block; /* Das <a>-Element als Block darstellen */
	text-indent: -9999px; /* Text ausblenden, wenn nur das Bild sichtbar sein soll */
}

.header .navi-exit a:hover {
    background: url('/images/exit-hover.jpg');
}

/* Content-Stile */
.content {
    padding: 40px;
	background-color: #f4f4f4; /* Hintergrundfarbe mit Transparenz */
    margin: 70px;
    border-radius: 10px;
    max-width: 900px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position: relative; /* Damit die Pseudoelemente relativ zu diesem Element positioniert werden */
}

.content::before, .content::after {
	content: '';
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
}

.content::before {
	width: 126px; /* Breite des Bildes */
	height: 153px; /* Höhe des Bildes */
	top: 40;
	right: 0;
	background-image: url('/images/top-right.png'); /* Pfad zum Bild oben links */
	transform: translate(40%, -50%); /* Optional: Position leicht anpassen */
}

.content::after {
	width: 327px; /* Breite des Bildes */
	height: 312px; /* Höhe des Bildes */
	bottom: 0;
	left: 0;
	background-image: url('/images/bottom-left.png'); /* Pfad zum Bild unten rechts */
	transform: translate(-30%, 20%); /* Optional: Position leicht anpassen */
}

.content h1 {
    font-family: 'New Romantics', sans-serif;
    color: #ffffff;
    text-align: center;
  	font-size: 60px;
    background: -webkit-linear-gradient(#d9d6cb,#edc4ee,#7ec4ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: normal;
	background-color: #000000;
}

.content h2 {
    font-family: 'Autumn Chant', sans-serif;
    color: #da9bc2;
    text-align: left;
  	font-size: 40px;
    background: -webkit-linear-gradient(#000000, #da9bc2, #ebbcda);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content h3 {
    font-family: 'New Romantics', sans-serif;
    color: #9ec3ef;
    text-align: center;
  	font-size: 46px;
	font-weight: normal;
}

.content h4 {
    font-family: 'New Romantics', sans-serif;
    color: #09090a;
    text-align: center;
  	font-size: 40px;
	font-weight: normal;
}

.content h5 {
    font-family: 'New Romantics', sans-serif;
    color: #545454;
    text-align: left;
  	font-size: 36px;
	font-weight: normal;
}

.content h6 {
    font-family: 'New Romantics', sans-serif;
    color: #d696a2;
    text-align: center;
  	font-size: 30px;
	font-weight: normal;
}

.content p {
    font-family: 'Nunito', sans-serif;
    color: #000000;
	font-size: 14pt;
}

.content b, strong {
	color: #da98c2;
    font-family: 'Vollkorn', 
}

.content i, italic {
	color: #57b2e1;
    font-family: 'Vollkorn', 
}

/* Content-Stile 2 Dark */
.content-dark {
    padding: 40px;
	background-color: #181818; /* Hintergrundfarbe mit Transparenz */
    margin: 70px;
    border-radius: 10px;
    max-width: 900px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position: relative; /* Damit die Pseudoelemente relativ zu diesem Element positioniert werden */
}

.content-dark::before, .content-dark::after {
	content: '';
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
}

.content-dark::before {
	width: 140px; /* Breite des Bildes */
	height: 163px; /* Höhe des Bildes */
	top: 30px;
	right: 0;
	background-image: url('/images/top-right-dark.png'); /* Pfad zum Bild oben links */
	transform: translate(0%, -40%); /* Optional: Position leicht anpassen */
}

.content-dark h1 {
    font-family: 'New Romantics', sans-serif;
    color: #ffffff;
    text-align: center;
  	font-size: 60px;
    background: -webkit-linear-gradient(#d9d6cb,#edc4ee,#7ec4ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: normal;
}

.content-dark h2 {
    font-family: 'Autumn Chant', sans-serif;
    color: #da9bc2;
    text-align: left;
  	font-size: 40px;
    background: -webkit-linear-gradient(#000000, #da9bc2, #ebbcda);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content-dark h3 {
    font-family: 'New Romantics', sans-serif;
    color: #9ec3ef;
    text-align: center;
  	font-size: 46px;
	font-weight: normal;
}

.content-dark h4 {
    font-family: 'New Romantics', sans-serif;
    color: #09090a;
    text-align: center;
  	font-size: 40px;
	font-weight: normal;
}

.content-dark h5 {
    font-family: 'New Romantics', sans-serif;
    color: #545454;
    text-align: left;
  	font-size: 36px;
	font-weight: normal;
}

.content-dark h6 {
    font-family: 'New Romantics', sans-serif;
    color: #d8d4bb;
    text-align: center;
  	font-size: 30px;
	font-weight: normal;
}

.content-dark p {
    font-family: 'Nunito', sans-serif;
    color: #d8d4bb;
	font-size: 14pt;
}

/* Footer-Stile */
/*.footer {
    background: url('/images/footer-skywalk.jpg') no-repeat left bottom;
	background-color: #000000;
	text-align: center;
	padding-top: 10px;
	background-color: #000000;
	color: #c9dbef;
	font-family: 'Nunito';
	text-transform: uppercase;
	height: 268px;
    border-top: 22px solid #d9d3bd; /* Border oben */
/*}*/

.footer {
    background: url('/images/footer-skywalk.jpg') no-repeat left bottom;
    background-color: #000000;
    text-align: center;
    color: #c9dbef;
    font-family: 'Nunito';
    text-transform: uppercase;
    border-top: 22px solid #d9d3bd; /* Border oben */
    
    /* Neue und angepasste Regeln */
    padding: 20px 0; /* Abstand oben und unten */
    min-height: 268px; /* Mindesthöhe des Footers, damit das Bild vollständig angezeigt wird */
    display: flex;
    align-items: flex-end; /* Text wird am unteren Rand des Footers ausgerichtet */
    justify-content: center; /* Text wird horizontal zentriert */
    box-sizing: border-box; /* Padding und Border werden in die Höhe einberechnet */
}


.footer a {
    color: #ffffff;
	background: -webkit-linear-gradient(#d9d6cb,#edc4ee,#7ec4ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: normal;
    font-family: 'Nunito', sans-serif;
    transition: color 0.3s;
}

.footer a:hover {
    color: #d2c2a0;	
}


/* Zusätzliche Stile für Links im Content-Bereich */
.content a {
    color: #d2c2a0;
    text-decoration: underline;
    font-family: 'Nunito', sans-serif;
    transition: color 0.3s;
}

.content a:hover {
    color: #ffffff;
	background: -webkit-linear-gradient(#d9d6cb,#edc4ee,#7ec4ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: normal;
}