/* Allgemeine Regeln am Anfang */
@font-face {
    font-family: 'oracle';
    src: url(/f/Orc/ABCOracle-Bold-Trial.woff) format('woff');
    src: url(/f/Orc/ABCOracle-BoldItalic-Trial.woff) format('woff'); 
    src: url(/f/Orc/ABCOracle-Book-Trial.woff) format('woff');
    src: url(/f/Orc/ABCOracle-BookItalic-Trial.woff);
    src: url(/f/Orc/ABCOracle-Light-Trial.woff2) format('woff');
    src: url(/f/Orc/ABCOracle-Regular-Trial.woff2) format('woff');
    src: url(/f/Orc/ABCOracle-RegularItalic-Trial.woff) format('woff'); 
    src: url(/f/Orc/ABCOracle-Thin-Trial.woff2) format('woff'); 
}

body { 
    font-family: Helvetica, sans-serif;
    margin: 2px;
    padding: 2px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black; 
    padding: 10px 20px;
    position: -webkit-sticky; /* Für Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Sicherstellen, dass es über anderen Elementen bleibt */
}

h1 { 
    font-family: Helvetica, sans-serif;
    font-size: 25px;
    text-shadow: 0 0 12px chartreuse;
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    display: flex;
    box-sizing: border-box;
    text-shadow: 0 0 12px chartreuse;
}

nav ul li {
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    text-decoration: none;
    color: black;
}

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
}

a:hover,
a:active,
a:focus {
    color: chartreuse;
    font-style: italic;
    text-shadow: 0 0 12px chartreuse;
}

.content { 
    font-size: 18px;
    margin-top: 12px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
}

.beschreibung { 
    font-size: 13px;
    grid-column-start: 2;
    grid-row: 5;
    margin-left: 20px;
    margin-top: 420px;
}

.container { 
    margin-top: 2px;
    margin-left: 0;
}

.grid-container { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-right: 20px;
    margin-left: 20px;
}

.grid-item {
    font-size: 12px;
    margin-top: 20px;
}

.grid-item p {
    text-align: left;
    margin-left: 0;
}

.grid-item img { 
    max-width: 100%;
    display: block;
    margin-top: 60px;
}

.text-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px; /* Verhindert zu viel Abstand unter den Texten */
}

.text-row p {
    margin: 0; /* Entfernt den Standardabstand */
}

.text-row .first-word {
    flex: 1; /* Füllt den verfügbaren Platz aus */
}

.text-row .second-word {
    flex: 1; /* Füllt den verfügbaren Platz aus */
}

.text-row .third-word {
    flex: 1; /* Füllt den verfügbaren Platz aus */
}

.span-item {
    grid-column: 1 / span 3;
    grid-row: auto; /* Entfernt festen Reihenabstand */
}

/*  Hier für Imperfections */

.image-imperfection {
    width: 100%; /* Passt die Breite des Bildes an */
    max-width: 100%;
    display: block;
    margin: 0 auto; /* Zentriert das Bild */
}

/*  Hier für Plate One */

.media-container {
    display: flex;
    gap: 20px; /* Abstand zwischen Video und Bild */
    margin-top: 20px; /* Reduzierter Abstand nach oben */
}

.plate-one-video {
    width: 100%;
    max-width: 550px; /* Den Wert nach Bedarf anpassen */
    height: auto;
}

/*  Hier für Soft Words */

.bild-container {
    display: flex;
    gap: 17px;
    margin-top: 20px; /* Reduzierter Abstand nach oben */
    width: 100%;
}

.bild-container img {
    max-width: 445px; /* Einheitliche Größe für Bilder */
    height: 800;
    margin-bottom: 60px;
}

.poem {
    margin-top: 10px; /* Abstand zwischen Bildern und Gedicht */
}

.poem span {
    white-space: nowrap; /* Verhindert Umbruch der Wörter */
}

/*  Hier für 843 Styling etc. */

.background-container {
    position: relative;
    width: 100%; /* Breite des Containers anpassen */
    max-width: 910px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container horizontal */
    padding: 10px; /* Reduziertes Padding */
    margin-bottom: 120px; /* Abstand nach unten */

}

/* Hintergrundbild */
.background-image {
    width: 120%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1; /* Hintergrundbild unter dem Video */
    margin-left: 24.1%;
}

/* Video Styling */
.overlay-video {
    position: absolute;
    top: 30%; /* Anpassung der Position */
    left: -25%; /* Anpassung der Position */
    width: 100%; /* Breite des Videos anpassen */
    height: auto;
    object-fit: cover; /* Deckt den Container vollständig ab */
    opacity: 0.7; /* Transparenz des Videos */
    z-index: 2; /* Video über dem Bild */
}

/* Text Styling */
.text-row {
    position: relative;
    z-index: 3; /* Text über dem Video */
    color: black; /* Textfarbe für bessere Sichtbarkeit */
    margin-top: 10px; /* Abstand zum Video */
}


/* Styling für Home */

.bild-container-home {
 
    width: 100%;
}

.bild-container-home img {
    max-width: 100%; /* Ensure the image does not exceed the width of its container */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove any extra space below the image */
    margin: 0 auto; /* Center the image horizontally */
    margin-bottom: 60px;
}