/* ==========================================================================
   Homepage Layout - Ralph Ammer Theme
   ========================================================================== */

/* WebGL Canvas - für zukünftige Animationen */
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Smooth fade-in animation */
  opacity: 0;
  transition: opacity 2s ease-out;
}

/* Canvas wird sichtbar wenn WebGL geladen ist */
.webgl.loaded {
  opacity: 1;
}

/* Page Container */
.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section Container - Standard für alle Sections */
.section-container {
  width: 100%;
  display: flex;
  flex-direction: row;
align-items: center;
    min-height: 60vh; /* Standard-Höhe für alle Sections */
}

/* Erste Section bekommt 90vh (basierend auf Reihenfolge) */
.section-container:first-child {
  min-height: 90vh;
  align-items: start;
}


.section-container--home::before {
  content: "";
  display: block;
  height: 0;
}

/* Left and Right Containers */
.left-container--aside {
  flex: 1; /* Flexibel, kann wachsen und schrumpfen */
  max-width: 50%; /* Maximale Breite, aber kann kleiner werden */
  min-width: 200px; /* Mindestbreite für die letter-spacing Animation */
  padding: 2rem 0rem; /* Oben/Unten 2rem, Links/Rechts 0rem */
  text-align: right;
  overflow: hidden; /* Verhindert Überlauf der letter-spacing Animation */
}

.right-container--main {
  flex: 1;
  min-width: 680px;
  padding: 20px;
  position: relative;
}

.left-container--main {
  flex: 1;
  min-width: 680px;
  padding: 20px;
}

.right-container--aside {
  flex: 1; /* Flexibel, kann wachsen und schrumpfen */
  max-width: 50%; /* Maximale Breite, aber kann kleiner werden */
  min-width: 200px; /* Mindestbreite für Inhalt */
  padding: 2rem 0rem; /* Konsistent mit left-container--aside */
  overflow: hidden; /* Konsistent falls auch letter-spacing verwendet wird */
}

/* Intro Container */
.intro-container {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  text-shadow: 2px 2px 10px rgba(200, 200, 200, 0.5);
}

.intro-container h1 {
  font-family: "Crimson Pro", serif !important;
  font-optical-sizing: auto;
  font-weight: 300 !important;
  font-style: normal;
  font-size: 3rem !important;
  line-height: 3.5rem !important;
  margin-top: 6rem;
  margin-bottom: 0.5rem;
  text-align: left !important;
}

.intro-container h2 {
  font-family: "Plus Jakarta Sans", serif !important;
  font-optical-sizing: auto;
  font-weight: 100 !important;
  font-style: normal;
  font-size: 1.5rem !important;
  line-height: 2.5rem !important;
  margin: 0 0 1rem 0;
}

.intro-container p {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 2rem;
}

/* Scroll Arrow */
#scroll-arrow {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 10%;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 10;
  text-decoration: none;
}

#scroll-arrow:hover {
  /* animation: bounce 2s infinite; */
  /* transform: translateY(3px); */
}

/* Pfeil */
.arrow {
  width: 16px;
  height: 16px;
  border-left: 2.5px solid #333;
  border-bottom: 2.5px solid #333;
  transform: rotate(-45deg);
  border-radius: 1px;
}

.arrow:hover {
  border-left: 3px solid #333;
  border-bottom: 3px solid #333;
}

/* Bounce-Animation */
@keyframes bounce {
  0%,
  40%,
  50%,
  60%,
  100% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-10px);
  }
  15% {
    transform: translateY(-5px);
  }
}

/* Scroll-Pfeil auf mobilen Geräten ausblenden */
@media screen and (max-width: 768px) {
  #scroll-arrow {
    display: none;
  }
}

/* Section Headlines & Animation */
.h1-fade-in-out {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 3rem;
  line-height: 3.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  opacity: 0;
  filter: blur(20px);
  letter-spacing: 20px;
  transition: opacity 1.8s ease, filter 1.2s ease, letter-spacing 1.8s ease;
  width: 100%; /* Feste Breite, damit Layout nicht beeinflusst wird */
  overflow: hidden; /* Verhindert Überlauf bei großem letter-spacing */
}

.h1-fade-in {
  opacity: 1;
  filter: blur(0px);
  letter-spacing: 0px;
}

.h1-fade-out {
  opacity: 0;
  filter: blur(20px);
  letter-spacing: 20px;
}

/* Article Cards */
.article-card-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  justify-content: center;
}

.article-card {
  text-decoration: none;
  color: black;
  width: 100%;
  max-width: 650px;
  height: 210px;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.article-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.article-card-image-container {
  min-width: 200px;
  max-width: 200px;
  align-self: center;
}

.article-card-image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.preview-container {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
}

.preview-container-textbox {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 3rem;
}

.preview-container p {
  font-size: 1rem !important;
  line-height: 1.3;
  padding-left: 0.5rem;
  margin-bottom: 0.75rem;
}

.article-card h2 {
  font-size: 1rem;
  line-height: 1.25rem;
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
}

.article-date-and-views {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  color: #999;
  font-weight: 300;
  font-style: normal;
  font-size: 0.75rem !important;
  line-height: 1rem;
  text-align: left;
  margin-top: 0rem;
  margin-bottom: 0.5rem;
}

/* Small Article Cards */
.article-card-container--small {
  width: 100%;
  max-width: 650px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
}

.article-card--small {
  text-decoration: none;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 33%;
  padding: 0.5rem;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.article-card--small:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.article-card-image-container--small {
  width: 100%;
  max-width: 130px;
  align-self: center;
}

.article-card--small h2 {
  font-size: 1rem;
  line-height: 1.25rem;
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
}

.article-card--small img {
  align-self: center;
  width: 160px;
  display: block;
}

.article-card--small .article-date-and-views {
  line-height: 1.3rem;
}

/* Drawing Container */
.drawing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 650px;
  gap: 1rem;
}

.drawing-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 1rem;
}

.drawing-inner-container {
  transform: translate(0px, 0px);
  transition: transform 0.2s ease-in-out;
  display: block;
  transform-style: preserve-3d; /* Stabilisiert das Rendering */
}

.drawing-inner-container:hover {
  transform: translate(-4px, -6px);
  transition: transform 0.2s ease-in-out;
}

.drawing-inner-container:hover .drawing {
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease-in-out;
}

.drawing {
  width: 160px;
  height: 160px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: relative;
  transition: box-shadow 0.2s ease-in-out;
}

.drawing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

/* Individuelle Positionierungen der Drawings */
.drawing-inner-container:nth-child(1) .drawing {
  transform: translate(10px, -50px) rotate(-4deg);
}

.drawing-inner-container:nth-child(2) .drawing {
  transform: translate(25px, -10px) rotate(7deg);
}

.drawing-inner-container:nth-child(3) .drawing {
  transform: translate(100px, -15px) rotate(-6deg);
}

.drawing-inner-container:nth-child(4) .drawing {
  transform: translate(10px, 30px) rotate(4deg);
}

.drawing-inner-container:nth-child(5) .drawing {
  transform: translate(-5px, -20px) rotate(-2deg);
}

.drawing-inner-container:nth-child(6) .drawing {
  transform: translate(12px, 0px) rotate(3deg);
}

/* Animation Container */
.animation-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.animation-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: nowrap; /* Verhindert Wrapping */
  align-items: flex-start; /* Verhindert Stretching */
}

.animation {
  width: 220px !important;
  height: 220px;
  max-width: 220px;
  flex: 0 0 220px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
}

.animation:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.animation video,
.animation img,
.animation-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animation-video {
  background: #000;
}

.animation-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: none; /* Hide overlay completely */
}

.animation:hover .animation-overlay {
  opacity: 0; /* No overlay on hover */
}

.animation-overlay h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}

.animation-overlay .animation-meta {
  font-size: 0.75rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.1;
}

/* Rounded Buttons */
.rounded-button {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ddd;
  border: 1.5px solid #333;
  padding: 4px 16px;
  border-radius: 12px;
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

.rounded-button:hover {
  background-color: rgba(250, 250, 250, 0.7);
  color: black;
  border: 1.5px solid #333;
}

.article-card:hover .rounded-button {
  background-color: rgba(240, 240, 240, 0.7);
  color: black;
  border: 1.5px solid #333;
}

.article-card .rounded-button {
  background-color: rgba(255, 255, 255, 1);
  color: #666;
  border: 1.5px solid #bbb;
}

.article-card--small:hover .rounded-button {
  background-color: rgba(240, 240, 240, 0.7);
  color: black;
  border: 1.5px solid #333;
}

.article-card--small .rounded-button {
  background-color: rgba(255, 255, 255, 1);
  color: #666;
  border: 1.5px solid #bbb;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet/Medium screens */
@media (max-width: 1024px) {
  .drawing-inner-container:nth-child(1) .drawing {
    transform: translate(10px, -10px) rotate(-4deg);
  }

    .section-container::before {
    content: "";
    display: block;
    height: 7rem;
  }

  .section-container:first-child::before {
    content: "";
    display: block;
    height: 40vh;
  }

  .section-container {
    flex-direction: column;
    height: auto;
    width: 100%;
    max-width: 680px;
    /* min-height: 0vh; */
  }

  .section-container:first-child {
    min-height: 60vh;
  }

  .left-container--aside,
  .right-container--aside {
    order: 1;
    text-align: center;
    padding: 1rem;
  }

  .left-container--main,
  .right-container--main {
    order: 2;
    min-width: 0;
  }

  .intro-container h1 {
    margin-top: 1rem;
  }

  .article-card-container,
  .drawing-container,
  .animation-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile */
@media (max-width: 480px) {
  /* Container-Layout für kleine Screens */
  .article-card-container--small {
    flex-direction: column; /* Alle Cards untereinander statt nebeneinander */
    gap: 1rem;
  }

  /* Große Cards - kompaktes vertikales Layout wie writing.css */
  .article-card {
    flex-direction: column; /* Vertikale Ausrichtung: Bild oben, Text unten */
    gap: 0; /* Kein Abstand zwischen Bild und Text */
    height: auto !important; /* Automatische Höhe für vertikales Layout */
    min-height: auto !important; /* Entfernt min-height */
    align-items: stretch; /* Elemente nehmen volle Breite ein */
    max-width: 100%; /* Volle Container-Breite */
  }

  .article-card-image-container {
    width: 100%;
    height: 200px;
    min-width: unset; /* Entfernt min-width für mobile */
    max-width: 200px; /* Maximale Breite 200px */
    align-self: center; /* Zentriert das Bild horizontal */
  }

  .article-card h2 {
    font-size: 1rem;
    line-height: 1.4; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
    padding: 0.5rem; /* Angepasstes Padding */
    margin-bottom: 0.5rem; /* Kleiner Abstand unterhalb der Überschrift */
  }

  /* h1 in side-containers für mobile kleiner machen */
  .left-container--aside h1,
  .right-container--aside h1 {
    font-size: 2.5rem !important;
    text-align: center;

  }

  .left-container--aside,
  .right-container--aside {
        max-width: 80% !important;
  }

      .section-container::before {
    content: "";
    display: block;
    height: 3rem;
  }

  /* Preview Container für vertikales Layout anpassen */
  .preview-container {
    padding: 0.5rem 1rem 1rem 1rem; /* Angepasstes Padding für vertikales Layout */
    justify-content: space-between; /* Button unten positionieren */
  }

  /* Excerpt in ganz kleiner Version ausblenden */
  .preview-container-textbox {
    display: none;
  }

  /* Kleine Cards - kompaktes vertikales Layout */
  .article-card--small {
    flex-direction: column; /* Vertikale Ausrichtung */
    gap: 0; /* Kein Abstand zwischen Bild und Text */
    height: auto !important; /* Automatische Höhe */
    min-height: auto !important; /* Entfernt min-height */
    align-items: stretch; /* Elemente nehmen volle Breite ein */
    width: 100%; /* Volle Breite da untereinander */
    margin-bottom: 1rem; /* Abstand zwischen Cards */
  }

  .article-card-image-container--small {
    width: 100%;
    height: 150px; /* Einheitliche Höhe für kleine Cards */
    min-width: unset; /* Entfernt min-width für mobile */
    max-width: 150px; /* Maximale Breite für kleine Cards */
    align-self: center; /* Zentriert das Bild horizontal */
  }

  .article-card--small h2 {
    font-size: 1rem; /* Einheitliche Schriftgröße */
    line-height: 1.4; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
    padding: 0.5rem; /* Angepasstes Padding */
    margin-bottom: 0.5rem; /* Kleiner Abstand unterhalb der Überschrift */
  }

  /* Date und Views in kleinen Cards minimieren */
  .article-card--small .article-date-and-views {
    display: none; /* Versteckt Date und Views für mehr Platz */
  }

  /* Button-Anpassungen für beide Card-Typen */
  .article-card .rounded-button,
  .article-card--small .rounded-button {
    margin-top: 1rem; /* Abstand oberhalb des Buttons */
    margin-bottom: 0; /* Kein Abstand unterhalb des Buttons */
    width: 100%; /* Volle Breite */
    text-align: center; /* Text zentriert */
    display: block; /* Block-Element für volle Breite */
    padding: 8px 16px; /* Padding für mobile */
    align-self: center; /* Zentriert den Button */
  }

  /* Nur die ersten 3 kleinen Cards anzeigen - die restlichen verstecken */
  .article-card--small:nth-child(n + 4) {
    display: none;
  }

  /* Drawing Cards - einspaltig wie Animation-Cards */
  .drawing-container {
    flex-direction: column; /* Einspaltiges Layout */
    align-items: center; /* Zentriert */
    max-width: 100%; /* Volle Breite */
    gap: 1rem;
  }

  .drawing-grid {
    flex-direction: column; /* Alle Drawings untereinander */
    width: 100%;
    align-items: center; /* Zentriert */
    gap: 1rem;
  }

  .drawing-inner-container {
    width: 100%; /* Volle Breite */
    max-width: 250px; /* Maximale Breite für mobile */
    align-self: center; /* Zentriert */
  }

  .drawing {
    width: 100%; /* Volle Breite des Containers */
    height: 200px; /* Angepasste Höhe für mobile */
    /* Entfernt komplexe Transformationen für mobile - einfachere Rotationen */
  }

  .drawing-inner-container:nth-child(1) .drawing {
    transform: rotate(-2deg); /* Einfache Rotation */
  }

  .drawing-inner-container:nth-child(2) .drawing {
    transform: rotate(3deg); /* Einfache Rotation */
  }

  .drawing-inner-container:nth-child(3) .drawing {
    transform: rotate(-1deg); /* Einfache Rotation */
  }

  .drawing-inner-container:nth-child(4) .drawing {
    transform: rotate(2deg); /* Einfache Rotation */
  }

  /* Nur die ersten 4 Drawing-Cards anzeigen */
  .drawing-inner-container:nth-child(n + 5) {
    display: none;
  }

  /* Animation Cards - einspaltig wie Blog-Posts */
  .animation-container {
    flex-direction: column; /* Einspaltiges Layout */
    align-items: center; /* Zentriert */
    gap: 1rem;
  }

  .animation-row {
    flex-direction: column; /* Alle Animations untereinander */
    width: 100%;
    gap: 1rem;
  }

  .animation {
    width: 100%; /* Volle Breite */
    max-width: 300px; /* Maximale Breite für mobile */
    height: 200px; /* Angepasste Höhe für mobile */
    align-self: center; /* Zentriert */
  }

  /* Nur die ersten 2 Animation-Cards anzeigen */
  .animation:nth-child(n + 3) {
    display: none;
  }
}