/* ==========================================================================
   Three Dimensions - Responsive Design System
   ============================================================================
   
   RESPONSIVE STRATEGY:
   - Uses CSS clamp() for fluid typography scaling
   - Uses viewport units (vw) for proportional spacing
   - Uses CSS custom properties for consistent scaling ratios
   - Minimal breakpoints - relies on fluid scaling where possible
   - Mobile navigation via hamburger menu
   - Preserves visual proportions across all screen sizes
   
   BREAKPOINTS (only where necessary):
   - Mobile: 0 - 768px
   - Tablet: 768px - 900px  
   - Desktop: 900px+
   
   HOW TO ADJUST SPACING/SIZING:
   1. Find the section for the page you want to adjust (index.html, ar-produktvisualisierung.html, etc.)
   2. Look for comments with "ADJUST THIS" - these are the values you can fine-tune
   3. Change the rem/px values to increase or decrease spacing/sizes
   
   VALUE GUIDE:
   - 0.25rem = ~4px (very small)
   - 0.5rem = ~8px (small)
   - 0.75rem = ~12px (medium-small)
   - 1rem = ~16px (medium)
   - 1.5rem = ~24px (medium-large)
   - 2rem = ~32px (large)
   - 3rem = ~48px (extra large)
   
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties for Responsive Scaling
   
   GLOBAL VARIABLES - Changing these affects ALL pages
   To adjust specific elements, see page-specific sections below
   ========================================================================== */
:root {
  /* Base scale factor - adjusts globally */
  --scale-factor: 1;
  
  /* LINE 28: Height reduction factor for "Jetzt Projekt umsetzen" buttons
     ADJUST: 0.6 = 40% reduction, 0.8 = 20% reduction, 0.9 = 10% reduction */
  --height-reduction-factor: 0.6; /* ADJUST THIS: button height reduction (0.6 = 40% smaller) */
  
  /* LINE 31: Gallery item height for mobile (Details-durch-3D page)
     ADJUST: change values to resize gallery on mobile */
  --gallery-item-height-mobile: clamp(12rem, 50vw, 22.5rem); /* ADJUST THIS: mobile gallery height */
  
  /* Gallery scale calculation - simplified for maintainability */
  /* On mobile (320px): 0.8, on desktop (1200px): 1.4 */
  --gallery-scale-mobile: 0.8;
  --gallery-scale-desktop: 1.4;
  
  /* Background attachment - scroll on mobile for performance, fixed on desktop */
  --bg-attachment-mobile: scroll;
  --bg-attachment-desktop: fixed;
  
  /* -------------------------------------------------------------------------
     TYPOGRAPHY - Font sizes (affects all pages)
     Format: clamp(minimum, preferred, maximum)
     - First value: smallest size (mobile)
     - Second value: scales with viewport width
     - Third value: largest size (desktop)
     ------------------------------------------------------------------------- */
  --font-hero-title: clamp(2.5rem, 5vw + 1rem, 6rem); /* ADJUST: hero section titles */
  --font-hero-subtitle: clamp(1.25rem, 2.5vw + 0.5rem, 2.5rem); /* ADJUST: hero subtitles */
  --font-main-headline: clamp(2rem, 4vw + 0.5rem, 4rem); /* ADJUST: main page headlines */
  --font-section-title: clamp(1.5rem, 3vw + 0.5rem, 4rem); /* ADJUST: section titles */
  --font-container-title: clamp(1.5rem, 3vw + 0.25rem, 3.6rem); /* ADJUST: container titles */
  --font-description: clamp(1rem, 1.5vw + 0.25rem, 1.5rem); /* ADJUST: description text */
  --font-ar-text: clamp(1.25rem, 2vw + 0.5rem, 2.3rem); /* ADJUST: AR section text */
  --font-cta-text: clamp(1.75rem, 3.5vw + 0.5rem, 4rem); /* ADJUST: CTA text */
  --font-button: clamp(1.2rem, 2vw + 0.2rem, 2.2rem); /* ADJUST: button text */
  --font-nav: clamp(0.85rem, 1vw + 0.25rem, 1rem); /* ADJUST: navigation text */
  --font-brand: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); /* ADJUST: brand name */
  
  /* -------------------------------------------------------------------------
     SPACING - Margins and padding (affects all pages)
     Used throughout the site - changing these affects global spacing
     ------------------------------------------------------------------------- */
  --space-xs: clamp(0.5rem, 1vw, 1rem); /* ADJUST: extra small spacing */
  --space-sm: clamp(1rem, 2vw, 2rem); /* ADJUST: small spacing */
  --space-md: clamp(2rem, 4vw, 4rem); /* ADJUST: medium spacing */
  --space-lg: clamp(3rem, 6vw, 6rem); /* ADJUST: large spacing */
  --space-xl: clamp(4rem, 8vw, 9rem); /* ADJUST: extra large spacing */
  --space-2xl: clamp(6rem, 10vw, 12rem); /* ADJUST: 2x large spacing */
  
  /* -------------------------------------------------------------------------
     CONTAINER WIDTHS - Max widths for content areas
     ------------------------------------------------------------------------- */
  --container-sm: min(90vw, 32rem); /* ADJUST: small container max width */
  --container-md: min(90vw, 45rem); /* ADJUST: medium container max width */
  --container-lg: min(90vw, 64rem); /* ADJUST: large container max width */
  --container-content: min(92vw, 1200px); /* ADJUST: main content max width */
  
  /* Border radius - scales proportionally */
  --radius-sm: clamp(0.5rem, 1vw, 1rem);
  --radius-md: clamp(1rem, 2vw, 1.5rem);
  --radius-lg: clamp(1.5rem, 3vw, 3.125rem);
}

/* ==========================================================================
   Mobile Navigation - Hamburger Menu
   ========================================================================== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

/* Hide mobile overlay on desktop - must not affect flex layout */
.mobile-menu-overlay {
  display: none;
}

.mobile-menu-toggle span {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: left;
}

/* Hamburger animation when active */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
}

/* ==========================================================================
   Responsive Header & Navigation
   ========================================================================== */
@media (max-width: 768px) {
  header {
    padding: 1rem !important;
  }
  
  .brand {
    font-size: var(--font-brand) !important;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 300px;
    height: 100vh;
    background: var(--header-bg, #0d2c57);
    flex-direction: column;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    gap: 1.5rem !important;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 999;
    overflow-y: auto;
  }
  
  .nav-links.active {
    right: 0;
  }
  
  .nav-links a {
    font-size: 1.1rem !important;
    padding: 0.5rem 0;
    display: block;
    width: 100%;
  }
  
  .services-dropdown {
    width: 100%;
  }
  
  .services-dropdown-button {
    width: 100%;
    justify-content: space-between;
    font-size: 1.1rem !important;
    padding: 0.5rem 0;
  }
  
  .services-dropdown-menu {
    position: static !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem;
    box-shadow: none !important;
  }
  
  .services-dropdown.active .services-dropdown-menu {
    display: block;
  }
  
  /* Mobile menu overlay */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
  }
  
  .mobile-menu-overlay.active {
    display: block;
  }
}

/* ==========================================================================
   Responsive Hero Section & Videos - Mobile Only
   ========================================================================== */
/* Only apply video container changes on mobile */
@media (max-width: 768px) {
  .video-container {
    width: 100% !important;
    position: relative;
  }

  .video-container video {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
  }
}

/* Only apply hero typography changes on mobile */
@media (max-width: 768px) {
  .hero-overlay {
    padding-top: clamp(5%, 10%, 15%) !important;
  }

  .hero-title {
    font-size: var(--font-hero-title) !important;
    padding: 0 1rem;
    text-align: center;
  }

  .hero-subtitle {
    font-size: var(--font-hero-subtitle) !important;
    padding: 0 1rem;
    text-align: center;
  }
}

/* ==========================================================================
   Responsive Content Sections - Mobile Only
   ========================================================================== */
@media (max-width: 768px) {
  .content-section {
    padding: 0 clamp(1rem, 4vw, 2rem) !important;
  }

  .gradient-section {
    min-height: auto !important;
    padding: var(--space-lg) 0 !important;
  }

  .white-gradient-section {
    min-height: auto !important;
  }
}

/* ==========================================================================
   Responsive Typography - Mobile Only
   ========================================================================== */
@media (max-width: 768px) {
  .main-headline {
    font-size: var(--font-main-headline) !important;
    padding: 0 1rem;
  }

  .section-title {
    font-size: var(--font-section-title) !important;
  }

  .cta-text {
    font-size: var(--font-cta-text) !important;
    padding: 0 1rem;
  }

  .description-text,
  .description-text-2 {
    font-size: var(--font-description) !important;
    padding: 0 1rem;
  }

  .ar-text,
  .ar-container-2-text,
  .ar-container-3-text {
    font-size: var(--font-ar-text) !important;
  }

  .ar-description,
  .ar-container-2-description,
  .ar-container-3-description {
    font-size: var(--font-description) !important;
  }

  .container-title {
    font-size: var(--font-container-title) !important;
  }

  .container-description {
    font-size: var(--font-description) !important;
  }
}

/* ==========================================================================
   Responsive AR Containers (index.html) - Mobile Only
   
   MOBILE SPACING GUIDE - Adjust these values to fine-tune margins:
   - 0.25rem = very small gap
   - 0.5rem = small gap
   - 0.75rem = medium-small gap
   - 1rem = medium gap
   - 1.5rem = medium-large gap
   - 2rem = large gap
   ========================================================================== */
@media (max-width: 768px) {
  
  /* -------------------------------------------------------------------
     INDEX.HTML - "Überzeuge dich selbst" section text spacing
     ------------------------------------------------------------------- */
  
  /* LINE 314-316: Gap below "Überzeuge dich selbst." title
     ADJUST: margin-bottom to increase/decrease space after CTA title */
  .cta-text {
    margin-bottom: 0.25rem !important; /* ADJUST THIS: space below "Überzeuge dich selbst." */
  }
  
  /* LINE 318-320: Gap below "Auf unseren 3 Beispielseiten..." text
     ADJUST: margin-bottom to change space before "AR erweckt dein Produkt" */
  .description-text-2 {
    margin-bottom: 6rem !important; /* ADJUST THIS: space below description, before AR text */
  }
  
  /* LINE 322-325: "AR erweckt dein Produkt zum Leben" text spacing
     ADJUST: margin-top = space above, margin-bottom = space below title */
  .ar-text {
    /*margin-top: 0.5rem !important;  ADJUST THIS: space above "AR erweckt dein Produkt" */
    margin-bottom: 1rem !important; /* ADJUST THIS: space below "AR erweckt dein Produkt" */
  }
  
  /* LINE 327-329: "Sieh dir an wie Augmented Reality..." description spacing
     ADJUST: margin-bottom to change gap before first container (table image) */
  .ar-description {
    margin-bottom: 1rem !important; /* ADJUST THIS: space below AR description, before 1st container */
  }
  
  /* -------------------------------------------------------------------
     INDEX.HTML - Container wrapper spacing (gaps between sections)
     ------------------------------------------------------------------- */
  
  /* LINE 332-334: Gap above 2nd container section ("Zeig was in deinem Produkt")
     ADJUST: margin-top to change space after 1st container */
  .ar-container-2-wrapper {
    margin-top: 1.5rem !important; /* Space above 2nd container section (align with details layout) */
  }
  
  /* LINE 336-338: Gap above 3rd container section ("Der Klassiker, ein Musthave")
     ADJUST: margin-top to change space after 2nd container */
  .ar-container-3-wrapper {
    margin-top: 1.5rem !important; /* Space above 3rd container section (align with details layout) */
  }
  
  /* LINE 341-343: Gap below 1st container (table image)
     ADJUST: margin-bottom to change space before "Zeig was in deinem Produkt" text */
  .ar-container {
    margin-bottom: 5rem !important; /* ADJUST THIS: space below 1st container (table) */
  }
  
  /* LINE 346-348: Gap below 2nd text wrapper
     ADJUST: margin-bottom to change space after 2nd text section */
  .ar-container-2-text-wrapper {
    margin-bottom: 1.5rem !important; /* ADJUST THIS: space below 2nd text section */
  }
  
  /* LINE 351-354: Gap below container titles ("Zeig was..." and "Der Klassiker...")
     ADJUST: margin-bottom to change space between title and description */
  .ar-container-2-text,
  .ar-container-3-text {
    margin-bottom: 1rem !important; /* ADJUST THIS: space below section titles */
  }
  
  /* LINE 356-359: Gap below container descriptions
     ADJUST: margin-bottom to change space after descriptions */
  .ar-container-2-description,
  .ar-container-3-description {
    margin-bottom: 1rem !important; /* ADJUST THIS: space below section descriptions */
  }

  /* -------------------------------------------------------------------
     INDEX.HTML - First AR Container (Table/Coffee machine image)
     ------------------------------------------------------------------- */
  
  /* LINE 362-366: 1st container dimensions
     ADJUST: width, min-height to change container size */
  .ar-container {
    width: min(90vw, 64rem) !important; /* ADJUST THIS: container width */
    height: auto !important;
    min-height: clamp(16rem, 40vw, 32rem); /* ADJUST THIS: minimum height */
    margin-top: 0 !important; /* Reduce gap above first AR container */
    margin-bottom: 1.5rem !important;
  }

  /* -------------------------------------------------------------------
     INDEX.HTML - Second AR Container (Exploded view image)
     ------------------------------------------------------------------- */
  
  /* LINE 369-373: 2nd container dimensions
     ADJUST: width, min-height to change container size */
  .ar-container-2 {
    width: min(90vw, 36rem) !important; /* ADJUST THIS: container width */
    height: auto !important;
    min-height: clamp(16rem, 35vw, 32rem); /* ADJUST THIS: minimum height */
    margin-bottom: 1.5rem !important;
  }
  
  /* LINE 375-379: 2nd container image position
     ADJUST: object-position (0%=left, 50%=center, 100%=right)
     ADJUST: translateX to shift image (negative=left, positive=right) */
  .white-gradient-section .ar-container-2 img,
  .ar-container-2 img {
    object-position:50% !important; /* ADJUST THIS: 0-100%, lower=more left */
    transform: translateX(-17%) !important; /* ADJUST THIS: negative=left, positive=right */
  }

  /* -------------------------------------------------------------------
     INDEX.HTML - Third AR Container (Lipstick image)
     ------------------------------------------------------------------- */
  
  /* LINE 382-386: 3rd container dimensions
     ADJUST: height to change container size (original: 32rem, current: 28.8rem = 10% smaller) */
  .ar-container-3 {
    width: min(90vw, 32rem) !important; /* ADJUST THIS: container width */
    height: 28rem !important; /* ADJUST THIS: container height (32rem=original, 28.8rem=10% smaller) */
    min-height: unset !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* LINE 388-392: 3rd container image position
     ADJUST: object-position (0%=left, 50%=center, 100%=right) */
  .white-gradient-section .ar-container-3 img,
  .ar-container-3 img {
    object-position: 50% !important; /* ADJUST THIS: 0-100%, higher=more right */
    transform: translateX(10%) !important;
  }
  
  /* LINE 394-397: 3rd container button size
     ADJUST: height and width to match container changes */
  .ar-container-3-button {
    height: 28rem !important; /* ADJUST THIS: should match .ar-container-3 height */
    width: min(90vw, 32rem) !important; /* ADJUST THIS: should match .ar-container-3 width */
  }

  /* -------------------------------------------------------------------
     INDEX.HTML - Container layout (text position relative to image)
     ------------------------------------------------------------------- */
  
  /* Text wrapper for AR containers - text below each container */
  .ar-container-2-wrapper {
    flex-direction: column-reverse !important; /* Image first, then text */
    align-items: center !important;
  }
  
  .ar-container-3-wrapper {
    flex-direction: column-reverse !important; /* Image first, then text */
    align-items: center !important;
  }
  
  .ar-container-2-text-wrapper,
  .ar-container-3-text-wrapper {
    text-align: center !important;
    width: 100%;
    order: 2; /* Text below image */
  }
  
  .ar-container-2-text,
  .ar-container-3-text,
  .ar-container-2-description,
  .ar-container-3-description {
    text-align: center !important;
    white-space: normal !important;
  }
}

/* ==========================================================================
   Responsive Text Section (two-column layout) - Mobile Only
   
   INDEX.HTML - "Warum Alle auf 3D setzen?" section
   ========================================================================== */
@media (max-width: 768px) {
  /* LINE 488-492: Text section layout and top margin
     ADJUST: margin-top to change space above "Warum Alle auf 3D setzen?" section */
  .text-section {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
    margin-top: 4.5rem !important; /* ADJUST THIS: space above "Warum Alle auf 3D setzen?" */
  }
  
  /* LINE 495-498: Section title font size ("Warum Alle auf 3D setzen?")
     ADJUST: font-size to change title size */
  .section-title {
    font-size: 1.75rem !important; /* ADJUST THIS: title font size */
    text-align: center !important;
  }
  
  /* LINE 500-505: Bullet points font size and padding
     ADJUST: font-size, padding-left/right */
  .bullet-points {
    font-size: 1rem !important; /* ADJUST THIS: bullet points font size (should be smaller than title) */
    padding-left: 1rem; /* ADJUST THIS: left padding */
    padding-right: 1rem; /* ADJUST THIS: right padding */
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* LINE 507-510: Individual bullet point spacing
     ADJUST: margin-bottom to change gap between bullet points */
  .bullet-points li {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important; /* ADJUST THIS: space between bullet points */
  }
  
  .cta-text,
  .description-text-2,
  .ar-text,
  .ar-description {
    text-align: center !important;
  }
  
  /* LINE 520-522: Space above "Überzeuge dich selbst" section
     ADJUST: margin-top to change gap before CTA section */
  .cta-text {
    margin-top: 1.25rem !important; /* ADJUST THIS: space above "Überzeuge dich selbst" */
  }
  
  /* LINE 525-527: Bottom padding of gradient section
     ADJUST: padding-bottom to change space at bottom of white gradient area */
  .white-gradient-section {
    padding-bottom: var(--space-lg) !important; /* ADJUST THIS: space at bottom of gradient section */
  }
}

/* ==========================================================================
   Mobile Title Spacing + Background Padding Consistency
   ========================================================================== */
@media (max-width: 768px) {
  /* Big titles: larger gap to following text */
  .hero-title,
  .main-headline,
  .section-title,
  .form-title,
  .ar-title-text,
  .ar-section-title {
    margin-bottom: 1.5rem !important;
  }

  /* Smaller titles/subtitles: slightly tighter gap */
  .container-title,
  .cta-text,
  .ar-text,
  .ar-container-2-text,
  .ar-container-3-text {
    margin-bottom: 1rem !important;
  }

  /* Consistent padding around background sections across pages */
  .gradient-section,
  .white-gradient-section,
  .background-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Bullet points should follow small-title spacing */
  .bullet-points {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Image → next text spacing on mobile (align with Details layout) */
  .ar-container,
  .ar-container-2,
  .ar-container-3,
  .image-text-wrapper,
  .image-text-wrapper.right-aligned,
  .image-text-wrapper.third-container,
  #ar-viewer-wrapper,
  .iphone-video-container {
    margin-bottom: 1.5rem !important;
  }

  /* Normalize section titles inside gradients (overrides inline styles) */
  .gradient-section .section-title {
    margin-top: 0 !important;
  }

  /* Details page: pull first gradient title closer */
  .gradient-section:first-of-type {
    padding-top: 1.5rem !important;
  }
}

/* ==========================================================================
   Responsive Image Container (description text overlay)
   ========================================================================== */
@media (max-width: 768px) {
  /* Make image container a flex column to put text above image */
  .image-container {
    position: relative;
    display: flex !important;
    flex-direction: column-reverse !important; /* Text above image */
  }
  
  .description-text {
    position: static !important;
    transform: none !important;
    padding: var(--space-sm) !important;
    text-align: center !important;
    order: 1; /* Text appears first (above) */
  }
  
  .content-image {
    order: 2; /* Image appears after text */
  }
}

/* ==========================================================================
   Responsive Footer
   ========================================================================== */
/* Only apply footer changes on mobile - desktop uses original styling */
@media (max-width: 768px) {
  footer {
    padding: var(--space-md) 0 !important;
    min-height: auto !important;
  }

  .footer-content {
    flex-direction: column !important;
    gap: var(--space-sm);
    padding: 0 var(--space-sm) !important;
    position: static !important;
  }

  .footer-text,
  .footer-links {
    position: static !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Responsive Buttons - Mobile Only
   
   NOTE: The inline styles in HTML files use !important, so we need to use
   more specific selectors or repeat !important to override them.
   ========================================================================== */
@media (max-width: 768px) {
  /* Jetzt Projekt umsetzen button - proportional scaling from desktop
     Desktop: width ~45%, height 6rem, font-size 2.2rem
     On mobile: reduced height significantly for mobile proportions
     Uses multiple selectors for higher specificity to override inline !important */
  .white-background-section .anfrage-button-container a.anfrage-button,
  .background-section .anfrage-button-container a.anfrage-button,
  .content-section-2 .anfrage-button-container a.anfrage-button,
  body .anfrage-button-container a.anfrage-button {
    width: min(85%, 550px) !important; /* ADJUST THIS: button width */
    height: 2.5rem !important; /* ADJUST THIS: button height */
    min-height: 2.5rem !important;
    max-height: 2.5rem !important;
    font-size: 0.875rem !important; /* ADJUST THIS: button text size */
    line-height: 2.5rem !important; /* Should match height */
    border-radius: 0.5rem !important; /* ADJUST THIS: button corner rounding */
  }

  #ar-button {
    padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 3rem) !important;
    font-size: clamp(0.875rem, 2vw, 1.5rem) !important;
    z-index: 1 !important; /* Keep below header (header has z-index > 100) */
  }
}

/* ==========================================================================
   Responsive Details-durch-3D Page - Mobile Only
   
   DETAILS-DURCH-3D.HTML - Image containers and text layout
   ORDER ON MOBILE: Title → Normal text → Container (image)
   ========================================================================== */
@media (max-width: 900px) {
  /* Main wrapper layout - stacks content vertically on mobile
     ORDER: Text (title + description) first, then image container
     Uses column-reverse because HTML has image first in DOM for some wrappers */
  .image-text-wrapper {
    display: flex !important;
    flex-direction: column-reverse !important; /* Reverse to put text above image */
    align-items: center !important;
    margin-top: 1rem !important; /* ADJUST THIS: gap above each image section */
  }
  
  /* Right-aligned wrapper already has text first in HTML, so use normal column */
  .image-text-wrapper.right-aligned {
    display: flex !important;
    flex-direction: column !important; /* Normal order since HTML has text first */
    justify-content: center !important;
    margin-top: 1rem !important; /* ADJUST THIS: gap above 2nd image section */
  }
  
  /* Third container has image first in HTML, so use column-reverse */
  .image-text-wrapper.third-container {
    flex-direction: column-reverse !important;
    margin-top: 1rem !important; /* ADJUST THIS: gap above 3rd image section */
  }
  
  .image-text-wrapper.right-aligned .image-container img {
    transform: none !important;
  }
  
  /* Text styling for mobile */
  .image-text-wrapper .container-text {
    text-align: center !important;
    width: 100%;
    margin-bottom: 1rem !important; /* ADJUST THIS: gap between text and image */
  }
  
  /* Section title: "Welche Perspektive möchtest du zuerst zeigen?" 
     Add space above and more space below before first image section */
  .gradient-section .section-title:first-of-type {
    margin-top: 0rem !important; /* ADJUST THIS: space above "Welche Perspektive..." */
    margin-bottom: 6rem !important; /* ADJUST THIS: gap before first "Birds Eye" title */
  }
  
  /* Image container dimensions */
  .image-container {
    width: min(90vw, 45rem) !important; /* ADJUST THIS: container width */
    height: auto !important;
    min-height: clamp(15rem, 40vw, 25rem); /* ADJUST THIS: minimum height */
  }
  
  /* Third image container (larger one) */
  .image-container.third {
    width: min(90vw, 37.5rem) !important; /* ADJUST THIS: 3rd container width */
    height: auto !important;
    min-height: clamp(20rem, 50vw, 39rem); /* ADJUST THIS: 3rd container min-height */
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   Responsive Gallery (Details-durch-3D) - Mobile Only
   
   DETAILS-DURCH-3D.HTML - Gallery carousel at bottom of page
   ON MOBILE: Shows one photo at a time (no adjacent photos visible)
   ========================================================================== */
@media (max-width: 768px) {
  /* Gallery container width and spacing */
  .gallery-container {
    width: 100% !important;
    max-width: 100vw !important;
    transform: none !important; /* Remove scaling to prevent overflow */
    margin-top: var(--space-md) !important; /* ADJUST THIS: space above gallery */
    overflow: hidden !important;
  }
  
  /* Gallery wrapper - fills full width */
  .gallery-wrapper {
    gap: 0 !important; /* No gap between items on mobile */
  }
  
  /* Gallery item dimensions - single photo view */
  .gallery-item {
    height: var(--gallery-item-height-mobile) !important;
    width: 100% !important; /* Full width for single photo view */
    max-width: 100vw !important;
    flex-shrink: 0 !important;
  }
  
  /* Gallery item image styling */
  .gallery-item img {
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--gallery-item-height-mobile) !important;
    object-fit: contain !important;
  }
  
  /* MOBILE GALLERY: Single photo view - hide adjacent photos completely
     Override all desktop gallery states to show only the active image */
  
  /* State 0: Only first image visible */
  .gallery-container.state-0 .gallery-item:nth-child(1) {
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .gallery-container.state-0 .gallery-item:nth-child(2),
  .gallery-container.state-0 .gallery-item:nth-child(3),
  .gallery-container.state-0 .gallery-item:nth-child(4) {
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  
  /* State 1: Only second image visible */
  .gallery-container.state-1 .gallery-item:nth-child(2) {
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .gallery-container.state-1 .gallery-item:nth-child(1),
  .gallery-container.state-1 .gallery-item:nth-child(3),
  .gallery-container.state-1 .gallery-item:nth-child(4) {
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  
  /* State 2: Only third image visible */
  .gallery-container.state-2 .gallery-item:nth-child(3) {
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .gallery-container.state-2 .gallery-item:nth-child(1),
  .gallery-container.state-2 .gallery-item:nth-child(2),
  .gallery-container.state-2 .gallery-item:nth-child(4) {
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  
  /* State 3: Only fourth image visible */
  .gallery-container.state-3 .gallery-item:nth-child(4) {
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .gallery-container.state-3 .gallery-item:nth-child(1),
  .gallery-container.state-3 .gallery-item:nth-child(2),
  .gallery-container.state-3 .gallery-item:nth-child(3) {
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  
  /* Gallery navigation buttons */
  .gallery-nav-button {
    width: 2.5rem !important; /* ADJUST THIS: nav button width */
    height: 2.5rem !important; /* ADJUST THIS: nav button height */
  }
  
  .gallery-nav-button svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

/* ==========================================================================
   Responsive 3D-Renderings-fuer-Shops Page
   
   3D-RENDERINGS-FUER-SHOPS.HTML - Color containers layout
   ========================================================================== */
/* Only apply container changes on mobile - desktop uses original styling */
@media (max-width: 900px) {
  /* LINE 701-705: Containers wrapper - stacks lipstick containers vertically
     ADJUST: gap to change space between containers */
  .containers-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important; /* ADJUST THIS: space between lipstick containers */
  }
  
  /* LINE 707-710: Individual color container dimensions
     ADJUST: width, height to change container size */
  .color-container {
    width: min(90vw, 25rem) !important; /* ADJUST THIS: container width */
    height: clamp(28rem, 70vw, 35rem) !important; /* ADJUST THIS: container height */
  }
}

/* 3D-RENDERINGS-FUER-SHOPS.HTML - Background section styling for mobile */
@media (max-width: 768px) {
  /* LINE 849-860: Background section with lipstick image
     ADJUST: background-size controls zoom level while maintaining coverage
     Using large percentage to zoom in while covering the full section */
  .background-section {
    background-attachment: scroll !important;
    background-size: 600% auto !important; /* ADJUST THIS: higher % = more zoomed in (600% creates heavy zoom while covering height) */
    background-position: center center !important; /* ADJUST THIS: position of the background image */
    min-height: 100vh !important; /* ADJUST THIS: ensures background covers full viewport height */
    padding-top: 3rem !important; /* ADJUST THIS: space at top of background section */
    padding-bottom: 3rem !important; /* ADJUST THIS: space at bottom before footer */
  }
}

/* ==========================================================================
   Responsive AR-Produktvisualisierung Page - Mobile Only
   
   AR-PRODUKTVISUALISIERUNG.HTML - AR viewer and model display
   ========================================================================== */
@media (max-width: 768px) {
  /* LINE 724-728: AR page title text
     ADJUST: font-size, padding for title sizing */
  .ar-title-text,
  .ar-section-title {
    font-size: var(--font-main-headline) !important; /* ADJUST in :root: --font-main-headline */
    padding: 0 1rem; /* ADJUST THIS: left/right padding */
  }

  /* LINE 730-734: AR page description text
     ADJUST: font-size, padding for description sizing */
  .ar-description-text,
  .ar-section-description {
    font-size: var(--font-description) !important; /* ADJUST in :root: --font-description */
    padding: 0 1rem; /* ADJUST THIS: left/right padding */
  }
  
  /* AR-PRODUKTVISUALISIERUNG: Remove gap between hero video and background
     The gradient background should start immediately after video.
     Text padding creates the visual gap inside the gradient. */
  .white-gradient-section {
    margin-top: 0 !important; /* ADJUST THIS: gap above gradient section (0 = no gap) */
    padding-top: 0 !important; /* No padding at top of gradient */
  }
  
  /* Content section inside gradient - this creates the gap between gradient start and text */
  .white-gradient-section .content-section {
    padding-top: 3rem !important; /* ADJUST THIS: gap between gradient start and first text */
  }

  .iphone-video-container video {
    max-width: 100%;
    height: auto !important;
  }

  /* LINE 741-744: AR viewer wrapper dimensions
     ADJUST: width, height to change the 3D model viewer size */
  #ar-viewer-wrapper {
    width: min(95vw, 900px) !important; /* ADJUST THIS: AR viewer width */
    height: clamp(300px, 60vw, 600px) !important; /* ADJUST THIS: AR viewer height */
  }
  
  /* AR model container - make button appear below model */
  .ar-model-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* LINE 754-759: "In AR ansehen" button position and spacing
     ADJUST: margin-top to change space between model and button
     z-index: 1 ensures button stays behind header when scrolling */
  #ar-button {
    order: 2 !important;
    margin-top: 0.5rem !important; /* ADJUST THIS: space above "In AR ansehen" button (0.5rem = slight gap) */
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 1 !important; /* Keep below header (header z-index is higher) */
  }
}

/* ==========================================================================
   Responsive Form Page (Anfrageformular) - Mobile Only
   
   THREE-DIMENSIONS-ANFRAGEFORMULAR.HTML - Contact form layout
   ========================================================================== */
@media (max-width: 768px) {
  /* LINE 766-768: Form title font size
     ADJUST: font-size for form page title */
  .form-title {
    font-size: var(--font-main-headline) !important; /* ADJUST in :root: --font-main-headline */
  }

  /* LINE 770-772: Form description font size */
  .form-description {
    font-size: var(--font-description) !important; /* ADJUST in :root: --font-description */
  }

  /* LINE 774-777: Form container spacing
     ADJUST: margin-top, padding for form container */
  .form-container {
    margin-top: var(--space-lg) !important; /* ADJUST in :root: --space-lg */
    padding: clamp(1.5rem, 4vw, 2.5rem) !important; /* ADJUST THIS: form padding */
  }

  /* Use body prefix for higher specificity to override HTML inline styles */
  body .form-email-wrapper,
  .text-section .form-email-wrapper,
  .content-section .form-email-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: flex-start !important; /* Left align all content */
    width: 100% !important;
  }
  
  /* Email text - stack label and email address vertically, closely spaced */
  body .form-email,
  .text-section .form-email,
  .form-email-wrapper .form-email {
    line-height: 1.2em !important; /* ADJUST THIS: controls spacing within the email text (reduced for tighter spacing) */
    display: block !important;
    text-align: left !important;
    margin: 0 0 0 0 !important;
    padding-left: 0 !important;
  }
  
  /* Move the email address closer to the label by reducing the <br><br> gap */
  .form-email br + br {
    display: none !important;
  }
  
  /* Social media section container - appears below email with double spacing */
  body .form-social-icons,
  .text-section .form-social-icons,
  .form-email-wrapper .form-social-icons {
    margin: 3rem 0 0 0 !important; /* ADJUST THIS: double space between email section and "Social Media" text */
    padding-left: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  
  /* "Social Media" text - left aligned */
  body .form-social-media,
  .text-section .form-social-media,
  .form-social-icons .form-social-media {
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important; /* ADJUST THIS: left-align "Social Media" text */
    display: block !important;
  }
  
  /* Social icons - left aligned below the "Social Media" text with normal spacing */
  body .form-social-icons-container,
  .text-section .form-social-icons-container,
  .form-social-icons .form-social-icons-container {
    margin: 1rem 0 0 0 !important; /* ADJUST THIS: normal space between "Social Media" text and icons */
    padding-left: 0 !important;
    justify-content: flex-start !important; /* Left-align social icons */
    width: auto !important;
  }
}

/* ==========================================================================
   Desktop: "Etwas anderes" (Other) Text Field Fix
   
   THREE-DIMENSIONS-ANFRAGEFORMULAR.HTML - Fix positioning and sizing of the
   "Etwas anderes" text input field in the "Interessen" section on desktop.
   This ensures the field is left-aligned and matches other text fields.
   ========================================================================== */
@media (min-width: 769px) {
  /* Fix "Etwas anderes" textarea positioning on desktop */
  .interest-other-text {
    width: 100%;
    margin-top: 1rem;
  }

  /* Match the textarea styling to other form inputs */
  .interest-other-text textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(13, 44, 87, 0.2);
    font-family: "Quicksand", "Helvetica", "Arial", sans-serif;
    font-size: 1rem;
    color: var(--blue-dark);
    background: #ffffff;
    resize: vertical;
    box-sizing: border-box;
  }

  /* Match label styling */
  .interest-other-text label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--blue-dark);
  }
}

/* ==========================================================================
   Responsive Legal Pages (Impressum, Datenschutz) - Mobile Only
   ========================================================================== */
@media (max-width: 768px) {
  .impressum-content h1,
  .datenschutz-content h1 {
    font-size: clamp(2rem, 4vw + 0.5rem, 3rem) !important;
  }

  .impressum-content h2,
  .datenschutz-content h2 {
    font-size: clamp(1.25rem, 2.5vw + 0.25rem, 2rem) !important;
  }

  .impressum-content,
  .datenschutz-content {
    font-size: clamp(1rem, 1.5vw + 0.25rem, 1.2rem) !important;
  }
  
  /* IMPRESSUM PAGE: Make gradient section fit content + padding (same as Datenschutz) */
  /* The gradient-section should have min-height: auto so it stops after text ends */
  .gradient-section {
    min-height: auto !important; /* ADJUST THIS: auto = stops after content, 100vh = full viewport height */
    height: auto !important;
    padding-bottom: 4rem !important; /* ADJUST THIS: space at bottom before footer (same as Datenschutz) */
  }
}

/* ==========================================================================
   Responsive Ueber-Mich Page - Mobile Only
   ========================================================================== */
@media (max-width: 768px) {
  .content-section h1 {
    font-size: clamp(2rem, 4vw + 0.5rem, 3rem) !important;
  }

  .content-text {
    font-size: clamp(1rem, 1.5vw + 0.25rem, 1.2rem) !important;
  }
}

/* ==========================================================================
   WeChat Modal - Mobile Only
   ========================================================================== */
@media (max-width: 768px) {
  .wechat-qr-content {
    width: min(90vw, 400px) !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
  }
}

/* ==========================================================================
   Safe Area Insets (for devices with notches) - Mobile Only
   ========================================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    header {
      padding-left: max(1rem, env(safe-area-inset-left)) !important;
      padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    
    .content-section {
      padding-left: max(1rem, env(safe-area-inset-left)) !important;
      padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    
    footer {
      padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ==========================================================================
   Performance: Reduce Motion for Users Who Prefer It
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  header,
  footer,
  .video-container,
  .mobile-menu-toggle,
  .mobile-menu-overlay {
    display: none !important;
  }
  
  .content-section {
    max-width: 100% !important;
    padding: 0 !important;
  }
}