/* mobile.css */


body {
  background-color: #fff;
  font-family: "acumin-pro", sans-serif;
  font-weight: 500;
}

h1 {
  font-family: "acumin-pro", sans-serif;
  font-weight: 500;
  font-size: 2.625rem;
  line-height: 95%;
}

h2 {
  font-family: "acumin-pro", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 105%;
}

p {
  font-family: "acumin-pro", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 105%;
}

nav ul {
  font-family: "acumin-pro", sans-serif;
  font-weight: 500;
  font-size: 1.1875rem;
}

/* =========================== allgemein =========================== */
html, body {
    font-size: 100%;
    scroll-behavior: smooth;
    overflow-y: auto;
    scroll-snap-type: none; /* Deaktiviert automatisches Projekt-Springen auf Mobile */
}

/* =========================== nav =========================== */

nav ul {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ändere von 4 auf 3 Spalten */
    padding: 10px 25px;
    font-family: "acumin-pro", sans-serif;
    font-weight: 500;
    font-size: 1.1875rem;
    color: inherit;
    gap: 0;
}

nav li:nth-child(1) { grid-column: 1; }
nav li:nth-child(2) { 
    grid-column: 2; 
}

/* Ändere "Antonia Louisa Albert" zu "About" auf Mobile */
nav li:nth-child(2) a {
    font-size: 0; /* Verstecke den ursprünglichen Text */
}

nav li:nth-child(2) a::before {
    content: "About";
    font-size: 1.1875rem; /* Zeige "About" stattdessen */
}

nav li:nth-child(3) { 
    display: none; /* Verstecke "Download CV" auf Mobile */
}

nav li {
    margin: 10px 0;
}

#first {
    padding-top: 40px;
}

/* =========================== grid und projekte =========================== */

.portfolio-grid {
    flex-direction: column;
    scroll-snap-type: none;
}

.project {
    height: auto;
    min-height: 100vh;
    display: block;
    margin-bottom: 20px; /* Reduzierte Abstände zwischen Projekten */
    scroll-snap-align: none; /* Entfernt automatisches Springen zu Projekten */
}

.image-container {
    height: auto;
    position: relative;
}

.image-wrapper {
    display: block;
    overflow-y: auto;
    height: auto;
}

.slide {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    padding: 0;
    display: block;
}

.project-description {
    display: block;
    padding: 0; /* Kein äußerer Rand */
    margin: 0; /* Kein äußerer Rand */
    width: 100%;
}

.project-description .text {
    padding: 20px; /* Innerer Abstand nur für den Text */
    margin-bottom: 0;
    order: 1;
}

.project-description .image {
    width: 100%;
    height: auto;
    order: 2;
    padding: 0;
    margin: 0;
}

.project-description h1 {
    font-size: 1.875rem;
    margin-bottom: 10px;
}

.project-description p {
    font-size: 1.2rem; /* Gleich wie About-Seite */
    line-height: 105%; /* Gleich wie About-Seite */
    margin-bottom: 10px;
}

.project-description img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0;
    padding: 0;
    display: block;
}

.slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0;
    padding: 0;
    display: block;
    vertical-align: top;
}

/* =========================== Video-Steuerung für Mobile =========================== */

.video-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    order: 3;
    width: 100%;
}

.grid-video {
    width: 100%;
    height: auto;
    max-height: 50vh;
    margin: 0;
    padding: 0;
    object-fit: cover; /* Ändere von contain zu cover für randlose Darstellung */
    display: block;
    border: none;
    outline: none;
}

/* Videos sollen automatisch starten auf Mobile */
@media (max-width: 850px) {
    video {
        pointer-events: auto;
    }
    
    /* Spezifische Anpassungen für Video-Grid auf Mobile */
    .video-grid {
        display: block; /* Verwende block statt flex für nahtlose Darstellung */
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .grid-video {
        width: 100%;
        height: auto;
        min-height: 40vh; /* Mindesthöhe für bessere Darstellung */
        max-height: 60vh; /* Angepasste maximale Höhe */
        object-fit: cover;
        display: block;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
    }
}

/* Fullscreen Video Fix für Mobile - NICHT Vollbild */
.fullscreen-video {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    z-index: auto !important;
    object-fit: cover; /* Auch hier cover statt contain */
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* Video Play Overlay entfernen, da Videos automatisch starten sollen */
.video-play-overlay {
    display: none !important;
}

/* Slide Container für Videos */
.slide:has(video) {
    position: relative;
    margin-bottom: 0;
    padding: 0;
}

/* Spezielle Anpassung für Slides mit video-grid */
.slide:has(.video-grid) {
    padding: 0;
    margin: 0;
    width: 100%;
}

/* PFEILE KOMPLETT VERSTECKEN */
button.prev, button.next {
    display: none !important;
}

/* Smooth Scrolling für bessere UX */
.image-wrapper {
    scroll-behavior: smooth;
}

/* Reihenfolge-Fix für spezifische Projekte */
.project:nth-child(1) { order: 1; } /* Leak me softly */
.project:nth-child(2) { order: 2; } /* Granser */
.project:nth-child(3) { order: 3; } /* Anna McCarthy */
.project:nth-child(4) { order: 4; } /* Tokio */
.project:nth-child(5) { order: 5; } /* Promovieren */
.project:nth-child(6) { order: 6; } /* Oma Lore */
.project:nth-child(7) { order: 7; } /* Julia */
.project:nth-child(8) { order: 8; } /* Hier und Dort */