@font-face {
font-family: 'Studio Feixen Sans';
src: url('fonts/StudioFeixenSans-Regular.woff2') format('woff2'),
url('fonts/StudioFeixenSans-Regular.woff') format('woff'),
url('fonts/StudioFeixenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Studio Feixen Edgy';
src: url('fonts/StudioFeixenEdgy-Bold.woff') format('woff'),
url('fonts/StudioFeixenEdgy-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Studio Feixen Mono';
src: url('fonts/StudioFeixenMono-Regular.woff2') format('woff2'),
url('fonts/StudioFeixenMono-Regular.woff') format('woff'),
url('fonts/StudioFeixenMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


.style-set-1 {
font-feature-settings: "ss01"; /* Stilistisches Set 1 */
}

.style-set-2 {
font-feature-settings: "ss02"; /* Stilistisches Set 2 */
}

.style-set-3 {
font-feature-settings: "ss03"; /* Stilistisches Set 3 */
}

body, html {
margin: 0;
padding: 0;
height: 200vh; /* Erhöhte Höhe, um Scrollen zu ermöglichen */
overflow-x: hidden;
font-family: Arial, sans-serif;
background-color: #FFED00; /* Setzt die Hintergrundfarbe der Seite */
}

.impressum {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #FFED00; /* Setzt die Hintergrundfarbe der Seite */
}

.content {
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: auto;
z-index: 10; /* Stellt sicher, dass der Inhalt über der Bildsequenz liegt */
animation: fadeIn 1s forwards ease-in-out;
}

.content-impressum {
opacity: 0;
top: 0;
left: 0;
animation: fadeIn 1s forwards ease-in-out;
}

.logo {
width: 70px;
margin: 32px;
animation: slideDown 1s forwards ease-in-out 0.5s;
}

.logo-impressum {
width: 70px;
margin: 32px;
animation: slideDown 1s forwards ease-in-out 0.5s;
}

.sidebar {
margin-left: 10px;
color: black;
}

h1 {
font-size: 78px;
font-family: 'Studio Feixen Edgy', Arial, sans-serif; /* Anwendung der Studio Feixen Edgy Bold Schriftart */
background-color: #009FE3;
color: black;
border-radius: 99px; /* Komplett abgerundete Ecken */
padding: 4px 32px; /* Etwas mehr horizontaler Abstand für die Lesbarkeit */
text-align: left; /* Links ausgerichteter Text */
display: inline-block; /* Hintergrund passt sich der Textbreite an */
margin: 8px 0px;
}

h2 {
font-size: 24px;
font-family: 'Studio Feixen Sans', Arial, sans-serif; /* Anwendung der Studio Feixen Regular Schriftart */
font-weight: 100;
color: black;
margin-left: 32px;
width: 500px;
line-height: 125%;
}

p {
color: black;
font-family: 'Studio Feixen Mono', Arial, sans-serif; /* Anwendung der Studio Feixen Regular Schriftart */
font-size: 12px;
text-transform: uppercase;
}

hr {
border: 1px solid #000;
margin: 24px 0;
}

.social-icons {
margin-left: 32px;
margin-top: 24px;
}

.social-icons img {
width: 36px;
margin: 5px 0;
margin-right: 24px;
transition: transform 0.2s ease-in-out; /* Übergangseffekt für sanfte Bewegung */
}

.social-icons img:hover {
animation: wiggle 0.1s infinite; /* Wiggle-Effekt bei Hover */
}

.image-sequence-container {
position: fixed; /* Fixiert die Bildsequenz im Viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 5; /* Stellt sicher, dass die Bildsequenz hinter dem Inhalt liegt */
}

#sequence-image {
width: 100%;
height: 100%;
object-fit: cover; /* Stellt sicher, dass das Bild den Container füllt */
filter: saturate(1.15);
filter: brightness(1.2)
}

.footer {
margin-right: 16px;
margin-bottom: 16px;
text-align: right; /* Rechtsbündige Ausrichtung des Footers */
font-family: 'Studio Feixen Sans', Arial, sans-serif; /* Anwendung der normalen Studio Feixen Schriftart */
}

.footer a {
color: black;
text-decoration: none;
margin: 0 16px;
font-family: 'Studio Feixen Mono', Arial, sans-serif; /* Anwendung der Studio Feixen Regular Schriftart */
text-transform: uppercase;
font-size: 12px;
}

.footer a:hover {
text-decoration: underline; /* Unterstreicht den Link beim Hover */
}

.footer-impressum {
margin-right: 16px;
margin-bottom: 16px;
text-align: right; /* Rechtsbündige Ausrichtung des Footers */
font-family: 'Studio Feixen Sans', Arial, sans-serif; /* Anwendung der normalen Studio Feixen Schriftart */
}

.footer-impressum a {
color: black;
text-decoration: none;
margin: 0 16px;
font-family: 'Studio Feixen Mono', Arial, sans-serif; /* Anwendung der Studio Feixen Regular Schriftart */
text-transform: uppercase;
font-size: 12px;
}

.footer-impressum a:hover {
text-decoration: underline; /* Unterstreicht den Link beim Hover */
}

/* Styling für Textauswahl */
::selection {
background-color: #F6BAC4; /* Setzt die Hintergrundfarbe für ausgewählten Text */
color: inherit; /* Beibehaltung der Textfarbe des umgebenden Textes */
}

::-moz-selection {
background-color: #F6BAC4; /* Setzt die Hintergrundfarbe für ausgewählten Text in Firefox */
color: inherit; /* Beibehaltung der Textfarbe des umgebenden Textes */
}

/* Mute Button Styling */
#mute-button {
position: fixed; /* Fixiert den Button im Viewport */
top: 32px;
right: 32px;
cursor: pointer;
z-index: 20; /* Stellt sicher, dass der Button über anderen Elementen liegt */
}

#mute-button img {
opacity: 0;
width: 30px; /* Feste Breite des Icons */
height: 30px; /* Feste Höhe des Icons */
animation: fadeIn 1s forwards ease-in-out;
}

/* Loader Styling */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFED00; /* Halbtransparentes Weiß */
display: flex;
justify-content: center;
align-items: center;
z-index: 100; /* Über allen anderen Inhalten */
flex-direction: column;
}

.progress-bar {
width: 80%;
height: 4px;
background-color: #F6BAC4; /* Light grey */
border-radius: 10px;
overflow: hidden;
}

.progress {
width: 0;
height: 100%;
background-color: #000; /* Black */
transition: width 0.4s ease;
}

.impressum-container {
max-width: 580px;
margin-left: 32px;
padding: 0;
justify-content: center; /* Horizontale Zentrierung */
align-items: center; /* Vertikale Zentrierung */
text-align: left;
}

.impressum-container p {
font-family: 'Studio Feixen Sans', Arial, sans-serif;
text-transform: none;
font-size: 13px;
line-height: 140%;
}

/* Responsive Anpassungen für mobile Geräte */
@media (max-width: 768px) {
.content {
justify-content: flex-end;
align-items: center;
text-align: center; /* Zentriert Text und andere Inhalte */
}

.impressum {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #FFED00; /* Setzt die Hintergrundfarbe der Seite */
}

.content-impressum {
justify-content: flex-end;
align-items: center;
text-align: center; /* Zentriert Text und andere Inhalte */
}

.impressum {
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #FFED00; /* Setzt die Hintergrundfarbe der Seite */
}

.sidebar {
margin-left: 0px;
}

.logo {
position: absolute;
top: 0;
align-content: center;
}

.logo-impressum {
position: relative; /* Setzt die Positionierung zurück */
margin: 0 auto; /* Zentriert das Logo horizontal */
padding-top: 32px;
padding-bottom: 32px;
display: block; /* Stellt sicher, dass es wie ein Blockelement behandelt wird */
text-align: center; /* Textausrichtung in der Mitte (falls benötigt) */
top: unset; /* Entfernt die `top`-Eigenschaft */
left: unset; /* Entfernt die `left`-Eigenschaft */
}

.impressum-container {
max-width: 100%;
margin-left: 32px;
margin-right: 32px;
padding: 0;
justify-content: center; /* Horizontale Zentrierung */
align-items: center; /* Vertikale Zentrierung */
text-align: left;
}

h1 {
font-size: 42px;
margin: 4px 0px;
padding: 2px 16px;
}

h2 {
font-size: 16px;
width: auto;
margin-top: 16px;
margin-left: 8px;
margin-right: 8px;
justify-content: center;
}

.social-icons {
margin-left: 0;
display: flex;
justify-content: center;
}

.social-icons img {
width: 28px;
margin: 5px 0;
margin-right: 24px;
transition: transform 0.2s ease-in-out; /* Übergangseffekt für sanfte Bewegung */
}

.footer {
text-align: center; /* Zentriert den Footer-Text */
margin: 24px 0px;
}

.footer a {
margin: 0px 8px;
}

.footer-impressum {
text-align: center; /* Zentriert den Footer-Text */
margin: 24px 0px;
}

.footer-impressum a {
margin: 0px 8px;
}

.image-sequence-container {
width: 100%; /* Beibehaltung der vollen Breite des Containers */
height: 80%; /* Beibehaltung der vollen Höhe des Containers */
}

#sequence-image {
width: 100%; /* Stellt sicher, dass das Bild die volle Breite einnimmt */
height: 80%; /* Passt die Höhe proportional an */
object-fit: cover; /* Füllt den Container, ohne das Seitenverhältnis zu verzerren */
object-position: 68% center; /* Zentriert den Bildausschnitt */
}
}

@keyframes wiggle {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}

@keyframes fadeIn {
to {
    opacity: 1;
}
}