/* Basis CSS bleibt bestehen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove any default margins and padding from the body and html */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* To prevent horizontal scroll */
}

/* Base Styles */
body {
    font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.33;
    font-weight: bold;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure the About page has the red background */
body.about-page {
    background-color: #ff0200; /* Red background for the About page */
}

/* Optional: Set a margin of 0 for the top of the .about-page */
.about-page {
    margin-top: 0;
}

/* Ensure no space on top for any page, including the About page */
body.about-page, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Navigation */
.navi, .navi-right {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px;
}

.navi a {
    display: block; /* Macht die Links zu Block-Elementen */
    margin: 0px 0;   /* Fügt etwas Abstand zwischen den Links hinzu */
}

.navi-right {
    text-align: end;
}

.navi_aktiv {
    text-decoration: line-through;
}

a {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: line-through;
    color: #F00;
}

/* Neue Positionierung für die Links */
.link-container {
    position: fixed;
    z-index: 10;
    padding: 8px;
}

.link-container-left {
    bottom: 0;
    left: 0;
    text-align: left;
}

.link-container-right {
    bottom: 0;
    right: 0;
    text-align: right;
}

/* Stil für die Links in den unteren Ecken */
.link-container a {
    display: block;
    color: #000;
    font-size: 13px;  /* Anpassung der Schriftgröße für die Links */
    text-decoration: none;
    margin: 0px 0;
}

.link-container a:hover {
    text-decoration: line-through;
    color: #F00;
}

.about-page .navi a {
    color: #000; /* Default color for links */
}

.about-page .navi a:hover {
    color: #fff; /* Hover state for the links */
}

.about-page .navi_aktiv {
    color: #fff; /* Active state for the About page */
}

.design-page .navi a {
    color: #000; /* Default color for links */
}

.design-page .navi a:hover {
    color: #fff; /* Hover state for the links */
}

.design-page .navi_aktiv {
    color: #fff; /* Active state for the Design page */
}

/* Gallery Container */
.container_gallery {
    height: 100vh;
    width: 100vw;
    padding: 3em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 3em;
    align-items: center;
}

.artwork {
  height: 100%;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.artwork img {
    width: 100%;
    height: 100%;
    max-height: 30vh;
    object-fit: contain;
    cursor: pointer;  /* Ensure pointer is applied to images */
    transition: opacity 0.5s ease-in-out;
}

.artwork img.hidden {
    opacity: 0;
}

/* Stile für die About-Page */
.bio {
    padding-top: 140px;
    margin: 8px;
    max-width: 700px;
}

/* Abstand zwischen den Abschnitten */
.section {
    margin-bottom: 20px;
}

/* Stil für Titel in den Abschnitten */
.title {
    font-weight: bold;
    font-style: italic;
    display: block;
}

/* Basis-Stile für die Artwork-Seite */
.description {
    width: 100%;
    max-width: 920px; /* Gleiche maximale Breite wie das Bild */
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.33;
    color: #000;
    word-wrap: break-word;
    white-space: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden; /* Verhindert Überlauf */
    text-overflow: ellipsis; /* Fügt '...' hinzu, wenn der Text zu lang ist */
}

.description .title {
    display: inline; /* Stellt sicher, dass kein Block-Element erzwungen wird */
}

/* Basis-Stile für die Artwork-Seite */
.artwork-page_item {
    width: 100%; /* Nimmt die volle Breite ein */
    max-width: 927px; /* Begrenzung auf eine maximale Breite von 1200px */
    text-align: center;
    margin: 0 auto; /* Zentriert die Items */
    padding: 8px 8px 0px 8px; /* Abstand zwischen den Bildern bleibt unverändert */
    box-sizing: border-box; /* Rand und Padding werden in der Breite berücksichtigt */
}

.artwork-page img {
    width: auto; /* Automatische Anpassung der Breite */
    height: auto; /* Dynamische Höhe, um das Seitenverhältnis zu bewahren */
    max-height: auto; /* Maximale Höhe des Bildes */
    max-width: 100%; /* Passt das Bild an die Containerbreite an */
    object-fit: contain; /* Stellt sicher, dass das Bild vollständig sichtbar bleibt */
    display: block; /* Entfernt Inline-Abstand */
    margin: 0 auto; /* Zentriert das Bild horizontal */
    cursor: pointer; /* Zeigt den Mauszeiger als Hand an */
    background-color: #fff; /* Optional: Hintergrundfarbe für leere Bereiche */
}

body.artwork-page {
    cursor: pointer; /* Changes the cursor to a hand pointer */
}

.artwork-page_item iframe {
    width: calc(100% - 16px); /* 8px Rand rechts und links */
    max-width: 100%; /* Verhindert Überschreitungen */
    height: auto; /* Dynamische Höhe, um das Seitenverhältnis zu bewahren */
    margin: 0 auto; /* Zentriert das Video */
    display: block; /* Entfernt Inline-Abstand */
    object-fit: contain; /* Bewahrt das Seitenverhältnis */
    box-sizing: border-box; /* Berücksichtigt Rand und Padding */
}

/* gallery Mobile */
.page-container {
    display: flex;
    flex-direction: column;
}

.gallery_mobile {
    width: 100%; /* Ensures the container matches the width of the page layout */
    max-width: 1000px; /* Adjust to match the maximum width of the image */
    text-align: center; /* Centers content within the container */
    margin-top: 0; /* Use CSS variables if the height might change */
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery_mobile_item {
    width: 100%; /* Nimmt die gesamte Breite ein */
    padding: 8px 8px 0px 8px;
    box-sizing: border-box;
}

.gallery_mobile_item img {
    width: 100%; /* Die Bilder nehmen 100% der Breite der Spalte ein */
    height: auto;
    display: block;
    cursor: pointer;  /* Der Mauszeiger zeigt auf die Bilder */
}

/* Ensure cursor shows on images */
body.gallery_mobile {
    cursor: pointer;
}

/* Descriptions */
.description {
    padding: 0 8px; /* 8px spacing on both sides */
    margin-bottom: 8px; /* Space below the description */
    box-sizing: border-box; /* Includes padding in the total width */
    text-align: center; /* Center the text */
    line-height: 1.33; /* Bessere Lesbarkeit */
    white-space: pre-line; /* Erlaubt manuelle Zeilenumbrüche */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    max-width: 1100px; /* Optional: Begrenzt die maximale Breite */
    margin-left: auto;
    margin-right: auto;
}

/* Titel und kursiver Text in Farbe #000fce */
.description .title,
.description em {
    font-style: italic;
    color: #000fce; /* Farbe für kursiven Text */
    display: inline;
    white-space: nowrap;
}

.description em {
    display: inline !important;
    white-space: normal !important; /* Erlaubt Zeilenumbrüche */
}

.description .title {
    word-break: keep-all;
    overflow-wrap: normal;
}

em {
    display: inline;
    white-space: nowrap; /* Optional: verhindert Umbruch innerhalb von <em> */
}

.description br {
    display: block;
    margin-bottom: 2px !important; /* Enforce this rule */
}

.description br + br {
    margin-bottom: 3px !important; /* Enforce this rule */
}


/* Mobile Optimierung */
@media (max-width: 768px) {
    .navi {
        padding: 8px;
        text-align: left;
        position: sticky;
    }

    .navi p {
      font-size: 18px; /* Erhöht die Schriftgröße der Textabschnitte */
  }

  .navi a {
      font-size: 18px; /* Erhöht die Schriftgröße der Links */
  }

  .link-container {
        display: none; /* Verhindert die Anzeige der Links auf mobilen Geräten */
    }

  .bio {
      padding-top: 0px;
      margin: 8px;
      max-width: 550px;
  }

  /* Gallery Item */
  .gallery_mobile_item {
      padding: 0 8px; /* 8px spacing inside the item */
      margin-bottom: 8px; /* 8px spacing below each item */
      box-sizing: border-box; /* Includes padding in the total width */
  }

  /* Gallery Image */
  .gallery_mobile_item img {
      width: 100%; /* Images fill their container */
      height: auto; /* Maintain aspect ratio */
      display: block; /* Removes inline spacing */
      object-fit: contain; /* Ensure images are not cropped */
  }

  /* Artwork Page Item */
  .artwork-page_item {
      padding: 0 8px; /* 8px spacing inside the item */
      margin-bottom: 8px; /* 8px spacing between items */
      box-sizing: border-box; /* Includes padding in the total width */
  }

  /* Images on Artwork Page */
  .artwork-page img {
      width: 100%; /* Fill the available container */
      height: auto; /* Maintain aspect ratio */
      max-width: 100%; /* Prevent overflow */
      display: block; /* Removes inline spacing */
      object-fit: contain; /* Ensure the image is fully visible */
  }

  /* Videos (iframe) */
  .artwork-page_item iframe {
      width: 100%; /* Fill the available container */
      max-width: calc(100% - 16px); /* Accounts for 8px padding on each side */
      height: auto; /* Maintain aspect ratio */
      display: block; /* Removes inline spacing */
      object-fit: contain; /* Ensure the video is fully visible */
  }

}