/* Responsive Breakpoints für alle Seiten */

/* Mobile Blink-Animation (1.5s Pause → 2x blinken → 1.5s Pause) - gleicher Effekt wie Desktop */
@keyframes blink-text-mobile {
  0%, 50%   { color: #000; }
  55%       { color: #a6a6a6; }
  60%       { color: #000; }
  65%       { color: #a6a6a6; }
  100%      { color: #000; }
}

/* Dropdown-Breiten für alle Projektseiten zentralisiert */
.beisser-dropdown-content,
.soviet-dropdown-content,
.vandmand-dropdown-content,
.tatort-dropdown-content,
.noctur-dropdown-content,
.floral-dropdown-content {
  left: 16.66vw !important;
  right: 16.66vw !important;
}

/* Mobile First Approach */

/* 1. Sehr kleine Handys (iPhone SE, ältere Android) */
@media (max-width: 360px) {
  /* Dropdown responsive Anpassungen */
  .dropdown {
    width: 95vw;
    max-width: 300px;
  }
  
  .dropdown-inner {
    padding: 0;
  }
  
  .preview-placeholder {
    padding: 0 1rem 1rem 1rem;
    font-size: 0.9rem;
  }
  
  .project-btn {
    padding: 0.75rem;
    font-size: 0.8rem;
  }
  
  .social-btn {
    padding: 0.75rem;
    font-size: 0.8rem;
    flex: 0 1 auto;
  }
  
  /* Projekt-Info responsive Abstände - erhöht */
  .project-info {
    gap: 0.25rem 0.3125rem !important; /* Vertikal: 4px, Horizontal: 5px */
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)) !important; /* Inhalt bestimmt Breite */
  }
  
  /* Dropdown-Breiten für sehr kleine Handys - wie iPhone 16 */
  .beisser-dropdown-content,
  .soviet-dropdown-content,
  .vandmand-dropdown-content,
  .tatort-dropdown-content,
  .noctur-dropdown-content,
  .floral-dropdown-content {
    left: 5vw !important;
    right: 5vw !important;
  }
  
  .info-item {
    gap: 0.125rem !important; /* 2px zwischen Label und Value - kleinster Abstand */
    white-space: nowrap !important; /* Kein Textumbruch */
  }
  
  /* Mobile: Cursor Circle entfernen */
  .cursor-circle {
    display: none !important;
  }
  
  /* Mobile: Hover-Effekte entfernen */
  .dropdown-btn:hover,
  .social-btn:hover,
  .project-btn:hover,
  .archive-btn:hover,
  .home-btn:hover,
  .read-more-btn:hover,
  .read-less-btn:hover,
  .hide-thumbnails-btn:hover,
  .show-thumbnails-btn:hover,
  .about-btn:hover,
  .zoom-btn:hover,
  .beisser-dropdown-content a:hover,
  .soviet-dropdown-content a:hover,
  .vandmand-dropdown-content a:hover,
  .tatort-dropdown-content a:hover,
  .noctur-dropdown-content a:hover,
  .floral-dropdown-content a:hover {
    animation: none !important;
  }
  
  /* Mobile: Konstante Blink-Effekte für Text-Elemente (halbe Geschwindigkeit) */
  .dropdown-btn:not(.active),
  .social-btn:not(.active),
  .archive-btn:not(.active),
  .home-btn:not(.active),
  .read-more-btn:not(.active),
  .hide-thumbnails-btn:not(.active),
  .show-thumbnails-btn:not(.active),
  .about-bar-text:not(.active),
  .about-btn:not(.active),
  .zoom-btn:not(.active),
  .beisser-dropdown-content a:not(.active),
  .soviet-dropdown-content a:not(.active),
  .vandmand-dropdown-content a:not(.active),
  .tatort-dropdown-content a:not(.active),
  .noctur-dropdown-content a:not(.active),
  .floral-dropdown-content a:not(.active) {
    animation: blink-text-mobile 3s ease-in-out infinite !important;
  }
  
  /* Mobile: Hide Button immer sichtbar */
  .hide-thumbnails-btn {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Mobile: Click-Animation für Border-Radius wird über JavaScript gehandhabt */
  
  /* Mobile: Video Interface smooth transitions */
  .video-controls {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  
  /* Mobile: Prevent project title wrapping in sticky bar */
  .sticky-bar h1 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* About Bar responsive für sehr kleine Handys */
  .about-bar {
    gap: 0.75rem !important; /* Sehr reduzierter Abstand zwischen Buttons */
    padding: 0 0.25rem !important; /* Seitlicher Padding */
  }
  
  .about-bar-text {
    min-width: 3rem !important; /* Kleinere Mindestbreite */
    font-size: 0.75rem !important; /* Kleinere Schrift */
    padding: 0.125rem 0.25rem !important; /* Sehr kompakteres Padding */
  }
  
  /* Projekt-Dropdown responsive für sehr kleine Handys */
  .beisser-dropdown-content {
    left: 2.5vw !important; /* 2.5% von links */
    right: 2.5vw !important; /* 2.5% von rechts = 95% Breite */
  }
  
  /* Text im zweiten Balken bündig mit Dropdown-Text - nur wenn Dropdown aktiv */
  .text-wrapper.active {
    left: calc(5vw + 2vw) !important; /* 5vw (Dropdown-Offset) + 2vw (Dropdown-Padding) - wie iPhone 16 */
  }
}

/* 2. Kleine Handys (iPhone SE, ältere Android) */
@media (max-width: 480px) {
  /* Dropdown responsive Anpassungen */
  .dropdown {
    width: 90vw;
    max-width: 300px;
  }
  
  .dropdown-inner {
    padding: 0;
  }
  
  .preview-placeholder {
    padding: 0 1rem 1rem 1rem;
    font-size: 0.9rem;
  }
  
  .project-btn {
    padding: 0.75rem;
    font-size: 0.8rem;
  }
  
  .social-btn {
    padding: 0.75rem;
    font-size: 0.8rem;
  }
  
  /* Projekt-Info responsive Abstände */
  .project-info {
    gap: 0.25rem 1.25rem !important; /* Vertikal: 4px, Horizontal: 20px */
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)) !important; /* Inhalt bestimmt Breite */
  }
  
  /* Dropdown-Breiten für kleine Handys - wie iPhone 16 */
  .beisser-dropdown-content,
  .soviet-dropdown-content,
  .vandmand-dropdown-content,
  .tatort-dropdown-content,
  .noctur-dropdown-content,
  .floral-dropdown-content {
    left: 5vw !important;
    right: 5vw !important;
  }
  
  .info-item {
    gap: 0.125rem !important; /* 2px zwischen Label und Value - kleinster Abstand */
    white-space: nowrap !important; /* Kein Textumbruch */
  }
  
  /* Mobile: Cursor Circle entfernen */
  .cursor-circle {
    display: none !important;
  }
  
  /* Mobile: Hover-Effekte entfernen */
  .dropdown-btn:hover,
  .social-btn:hover,
  .project-btn:hover,
  .archive-btn:hover,
  .home-btn:hover,
  .read-more-btn:hover,
  .read-less-btn:hover,
  .hide-thumbnails-btn:hover,
  .show-thumbnails-btn:hover,
  .about-btn:hover,
  .zoom-btn:hover,
  .beisser-dropdown-content a:hover,
  .soviet-dropdown-content a:hover,
  .vandmand-dropdown-content a:hover,
  .tatort-dropdown-content a:hover,
  .noctur-dropdown-content a:hover,
  .floral-dropdown-content a:hover {
    animation: none !important;
  }
  
  /* Mobile: Konstante Blink-Effekte für Text-Elemente (halbe Geschwindigkeit) */
  .dropdown-btn:not(.active),
  .social-btn:not(.active),
  .archive-btn:not(.active),
  .home-btn:not(.active),
  .read-more-btn:not(.active),
  .hide-thumbnails-btn:not(.active),
  .show-thumbnails-btn:not(.active),
  .about-bar-text:not(.active),
  .about-btn:not(.active),
  .zoom-btn:not(.active),
  .beisser-dropdown-content a:not(.active),
  .soviet-dropdown-content a:not(.active),
  .vandmand-dropdown-content a:not(.active),
  .tatort-dropdown-content a:not(.active),
  .noctur-dropdown-content a:not(.active),
  .floral-dropdown-content a:not(.active) {
    animation: blink-text-mobile 3s ease-in-out infinite !important;
  }
  
  /* Mobile: Hide Button immer sichtbar */
  .hide-thumbnails-btn {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Mobile: Click-Animation für Border-Radius wird über JavaScript gehandhabt */
  
  /* Mobile: Video Interface smooth transitions */
  .video-controls {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  
  /* Mobile: Prevent project title wrapping in sticky bar */
  .sticky-bar h1 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* About Bar responsive für kleine Handys */
  .about-bar {
    gap: 1rem !important; /* Reduzierter Abstand zwischen Buttons */
    padding: 0 0.5rem !important; /* Seitlicher Padding */
  }
  
  .about-bar-text {
    min-width: 4rem !important; /* Kleinere Mindestbreite */
    font-size: 0.8rem !important; /* Kleinere Schrift */
    padding: 0.25rem 0.5rem !important; /* Kompakteres Padding */
  }
  
  /* Projekt-Dropdown responsive für kleine Handys */
  .beisser-dropdown-content {
    left: 5vw !important; /* 5% von links */
    right: 5vw !important; /* 5% von rechts = 90% Breite */
  }
}

/* 2. iPhone 16 und größere Handys */
@media (max-width: 1179px) {
  /* Dropdown responsive Anpassungen */
  .dropdown {
    width: 85vw;
    max-width: 350px;
  }
  
  .preview-placeholder {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
  
  .project-info {
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)) !important; /* Inhalt bestimmt Breite */
    gap: 0.375rem 2.5rem !important; /* Vertikal: 6px, Horizontal: 40px */
  }
  
  /* Dropdown-Breiten für iPhone 16 und größer */
  .beisser-dropdown-content,
  .soviet-dropdown-content,
  .vandmand-dropdown-content,
  .tatort-dropdown-content,
  .noctur-dropdown-content,
  .floral-dropdown-content {
    left: 5vw !important;
    right: 5vw !important;
  }
  
  .info-item {
    gap: 0.1875rem !important; /* 3px zwischen Label und Value */
    white-space: nowrap !important; /* Kein Textumbruch */
  }
  
  /* Mobile: Cursor Circle entfernen */
  .cursor-circle {
    display: none !important;
  }
  
  /* About Bar responsive für Standard Handys */
  .about-bar {
    gap: 1.5rem !important; /* Etwas mehr Abstand als bei kleinen Handys */
    padding: 0 0.75rem !important;
  }
  
  .about-bar-text {
    min-width: 5rem !important;
    font-size: 0.85rem !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  /* Projekt-Dropdown responsive für iPhone 16 und größer - 90% Breite */
  .beisser-dropdown-content {
    left: 5vw !important; /* 5% von links */
    right: 5vw !important; /* 5% von rechts = 90% Breite */
  }
  
  /* Text im zweiten Balken bündig mit Dropdown-Text - nur wenn Dropdown aktiv */
  .text-wrapper.active {
    left: calc(5vw + 2vw) !important; /* 5vw (Dropdown-Offset) + 2vw (Dropdown-Padding) */
  }
}




/* 3. Large Desktop (iMac, große Monitore) */
@media (min-width: 1441px) {
  /* Projekt-Info responsive Abstände für große Bildschirme */
  .project-info {
    gap: 0.75rem 7.5rem !important; /* Vertikal: 12px, Horizontal: 120px */
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)) !important; /* Inhalt bestimmt Breite */
  }
  
  .info-item {
    gap: 0.375rem !important; /* 6px zwischen Label und Value - mehr Platz */
    white-space: nowrap !important; /* Kein Textumbruch */
  }
}

/* 3D Model Viewer Responsive */
@media (max-width: 1024px) {
  .model-viewer-wrapper {
    height: calc(100vh - 220px) !important; /* Wie andere Bilder */
  }
}

@media (max-width: 768px) {
  .model-viewer-wrapper {
    height: 400px !important; /* Kleinere Höhe für mobile */
  }
  
  .model-viewer-controls {
    width: 50% !important; /* Breiter für mobile */
    gap: 8px !important; /* Kleinerer Abstand */
  }
  
  .zoom-btn {
    width: 32px !important; /* Etwas kleiner für mobile */
    height: 32px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .model-viewer-wrapper {
    height: calc(100vh - 200px) !important; /* Angepasst für mobile */
  }
  
  .model-viewer-controls {
    width: 60% !important; /* Noch breiter für sehr kleine Bildschirme */
    gap: 6px !important; /* Noch kleinerer Abstand */
  }
  
  .zoom-btn {
    width: 28px !important; /* Noch kleiner für sehr kleine Bildschirme */
    height: 28px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  .model-viewer-wrapper {
    height: calc(100vh - 180px) !important; /* Angepasst für sehr kleine Bildschirme */
  }
}