/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
  /* ===== GRUNDLEGENDE SEITENSTYLES ===== */
  body,
  html {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
  }

  /* ===== HAUPTCONTAINER ===== */
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
  }

  /* ===== LINKE SEITE (GALLERY) ===== */
  .left {
    flex: 1;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  /* ===== GALLERY QUADRAT ===== */
  .gallery-quadrat {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #222;
  }

  /* ===== GALLERY BILDER ===== */
  .gallery-quadrat img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  /* ===== AKTIVES GALLERY BILD ===== */
  .gallery-quadrat img.active {
    opacity: 1;
  }

  /* ===== RECHTE SEITE (HERO) ===== */
  .right {
    flex: 1;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  /* ===== HERO QUADRAT - IDENTISCH ZUR NORMALEN VIEW ===== */
  .hero-quadrat {
    width: 300px;
    aspect-ratio: 1 / 1;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* ===== HERO TEXT - MITTIG ===== */
  .hero-text {
    font-family: "Poppins", sans-serif !important;
    font-size: 60px !important;
    font-weight: 900 !important;
    color: #333 !important;
    letter-spacing: -2px !important;
    text-transform: uppercase !important;
    line-height: 0.9 !important;
    margin: 0 !important;
  }

  /* ===== COPYRIGHT SPAN ===== */
  .hero-text span {
    font-size: 0.6em;
    vertical-align: bottom;
  }

  /* ===== AI TEXT - OBEN LINKS ===== */
  .hero-quadrat .ai-text {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #666 !important;
    text-transform: lowercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
  }

  /* ===== MUSIC PLAYER - MITTIG ZWISCHEN AI TEXT UND SAFRII ===== */
  .hero-quadrat .music-player {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-top: -50px !important;
    width: 35px !important;
    height: 35px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid #333 !important;
  }

  /* ===== MUSIC PLAYER HOVER EFFECT ===== */
  .hero-quadrat .music-player:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
  }

  /* ===== MUSIC ICON ===== */
  .hero-quadrat .music-player i {
    font-size: 14px !important;
    color: #333 !important;
  }

  /* ===== ABOUT TEXT - UNTEN LINKS ===== */
  .hero-quadrat .about-text {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #333 !important;
    text-decoration: none !important;
    text-transform: lowercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
  }

  /* ===== ABOUT TEXT HOVER UNDERLINE ===== */
  .hero-quadrat .about-text::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #333;
    transition: width 0.3s ease;
  }

  /* ===== ABOUT TEXT HOVER EFFECT ===== */
  .hero-quadrat .about-text:hover::after {
    width: 100%;
  }

  /* ===== GALLERY TEXT - UNTEN MITTE ===== */
  .hero-quadrat .gallery-text {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #333 !important;
    text-decoration: none !important;
    text-transform: lowercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
  }

  /* ===== GALLERY TEXT HOVER UNDERLINE ===== */
  .hero-quadrat .gallery-text::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #333;
    transition: width 0.3s ease;
  }

  /* ===== GALLERY TEXT HOVER EFFECT ===== */
  .hero-quadrat .gallery-text:hover::after {
    width: 100%;
  }

  /* ===== PROJECTS TEXT - UNTEN RECHTS ===== */
  .hero-quadrat .projects-text {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #333 !important;
    text-decoration: none !important;
    text-transform: lowercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
  }

  /* ===== PROJECTS TEXT HOVER UNDERLINE ===== */
  .hero-quadrat .projects-text::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #333;
    transition: width 0.3s ease;
  }

  /* ===== PROJECTS TEXT HOVER EFFECT ===== */
  .hero-quadrat .projects-text:hover::after {
    width: 100%;
  }

  /* ===== ZWEITER CONTAINER ===== */
  .secondcontainer {
    min-height: 150vh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ===== TOP BEREICH ===== */
  .secondcontainer .top {
    flex: 1 !important;
    background-color: #222 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ===== SECOND LEFT (TEXT BEREICH) ===== */
  .secondcontainer .second-left {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 30px !important;
  }

  /* ===== SECTION TITLE ===== */
  .secondcontainer .section-title {
    font-family: "Poppins", sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: -2px !important;
    text-transform: lowercase !important;
    line-height: 0.9 !important;
    margin: 0 0 10px 0 !important;
  }

  /* ===== SECTION DESCRIPTION ===== */
  .secondcontainer .section-description {
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #ccc !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* ===== SECOND RIGHT (GALLERY BEREICH) ===== */
  .secondcontainer .second-right {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 30px !important;
  }

  /* ===== PROMPTING GALLERY ===== */
  .secondcontainer .prompting-gallery {
    width: 100% !important;
    max-width: 400px !important;
    height: 250px !important;
    background-color: #333 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 250px !important;
    min-width: 330px !important;
  }

  /* ===== PROMPTING GALLERY BILDER ===== */
  .secondcontainer .prompting-gallery img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
  }

  /* ===== AKTIVES PROMPTING BILD ===== */
  .secondcontainer .second-right .prompting-gallery img.active {
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* ===== ERSTES PROMPTING BILD IMMER SICHTBAR ===== */
  .secondcontainer .second-right .prompting-gallery img:first-child {
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* ===== BOTTOM BEREICH ===== */
  .secondcontainer .bottom {
    flex: 1 !important;
    background-color: black !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ===== THIRD LEFT (GALLERY BEREICH) ===== */
  .secondcontainer .third-left {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 30px !important;
  }

  /* ===== SOCIAL GALLERY ===== */
  .secondcontainer .social-gallery {
    width: 100% !important;
    max-width: 400px !important;
    height: 250px !important;
    background-color: #333 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* ===== SOCIAL GALLERY BILDER ===== */
  .secondcontainer .social-gallery img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
  }

  /* ===== AKTIVES SOCIAL BILD ===== */
  .secondcontainer .social-gallery img.active {
    opacity: 1 !important;
  }

  /* ===== THIRD RIGHT (TEXT BEREICH) ===== */
  .secondcontainer .third-right {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 30px !important;
  }

  /* ===== FOOTER ===== */
  .footer {
    background-color: black;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #333;
  }

  /* ===== FOOTER TEXT ===== */
  .footer p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 300;
    margin: 0;
  }

  /* ===== FOOTER LINK ===== */
  .footer-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  /* ===== FOOTER LINK HOVER EFFECT ===== */
  .footer-link:hover {
    color: #ccc;
  }
}

/* ===== EXTRA KLEINE MOBILE GERÄTE (iPhone SE, iPhone X, etc.) ===== */
@media (max-width: 480px) {
  /* ===== HERO QUADRAT - KLEINER ===== */
  .hero-quadrat {
    width: 250px !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* ===== HERO TEXT - KLEINER ===== */
  .hero-text {
    font-size: 45px !important;
  }

  /* ===== AI TEXT - KLEINER ===== */
  .hero-quadrat .ai-text {
    font-size: 10px !important;
    top: 15px !important;
    left: 15px !important;
  }

  /* ===== MUSIC PLAYER - KLEINER ===== */
  .hero-quadrat .music-player {
    width: 30px !important;
    height: 30px !important;
    margin-top: -40px !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-quadrat .music-player i {
    font-size: 12px !important;
  }

  /* ===== NAVIGATION TEXTE - KLEINER ===== */
  .hero-quadrat .about-text,
  .hero-quadrat .gallery-text,
  .hero-quadrat .projects-text {
    font-size: 12px !important;
    bottom: 15px !important;
  }

  .hero-quadrat .about-text {
    left: 15px !important;
  }

  .hero-quadrat .projects-text {
    right: 15px !important;
  }

  /* ===== GALLERY QUADRAT - KLEINER ===== */
  .gallery-quadrat {
    width: 250px !important;
    height: 250px !important;
  }

  /* ===== SECTION TITLES - KLEINER ===== */
  .secondcontainer .section-title {
    font-size: 24px !important;
  }

  /* ===== SECTION DESCRIPTIONS - KLEINER ===== */
  .secondcontainer .section-description {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* ===== GALLERIES - KLEINER ===== */
  .secondcontainer .prompting-gallery,
  .secondcontainer .social-gallery {
    height: 200px !important;
    min-height: 200px !important;
    max-width: 350px !important;
  }

  /* ===== PADDING REDUZIERT ===== */
  .secondcontainer .second-left,
  .secondcontainer .second-right,
  .secondcontainer .third-left,
  .secondcontainer .third-right {
    padding: 20px !important;
  }

  /* ===== CONTAINER PADDING REDUZIERT ===== */
  .left,
  .right {
    padding: 15px !important;
  }
}