/* Mobile Services Page Fixes */
:root {
  --bordeaux-start: #8a0b29;
  --bordeaux-end: #5d071a;
  --rosa-start: #f8c5d8;
  --rosa-end: #e6a7c4;
  --gold-start: #d4af37;
  --gold-end: #f7e08b;
  --cremeweiss: #fdf6f8;
  --zartgrau: #fceef2;
  --anthrazit: #36454f;
  --text-dunkel: #1b0e0e;
  --text-hell: #994d51;
}

/* Fix button colors on mobile - prevent hyperlink blue */
@media (max-width: 768px) {
  /* Navigation buttons - fix hyperlink colors */
  nav a,
  .sticky nav a {
    color: var(--text-hell) !important;
    text-decoration: none !important;
  }
  
  nav a:hover,
  .sticky nav a:hover {
    color: var(--bordeaux-start) !important;
    border-color: var(--bordeaux-start) !important;
  }
  
  nav a:visited,
  .sticky nav a:visited {
    color: var(--text-hell) !important;
  }
  
  /* Active navigation button */
  nav a.border-\[var\(--bordeaux-start\)\],
  nav a[class*="border-[var(--bordeaux-start)]"] {
    background-color: var(--bordeaux-start) !important;
    color: white !important;
    border-color: var(--bordeaux-start) !important;
  }
  
  /* CTA Buttons - fix colors */
  .bg-gradient-gold,
  a.bg-gradient-gold {
    background: linear-gradient(to right, var(--gold-start), var(--gold-end)) !important;
    color: var(--text-dunkel) !important;
    text-decoration: none !important;
  }
  
  .bg-gradient-gold:visited,
  a.bg-gradient-gold:visited {
    color: var(--text-dunkel) !important;
  }
  
  /* Phone button */
  a[href^="tel:"] {
    color: white !important;
    text-decoration: none !important;
    border-color: var(--gold-start) !important;
  }
  
  a[href^="tel:"]:hover {
    background-color: var(--gold-start) !important;
    color: var(--text-dunkel) !important;
  }
  
  a[href^="tel:"]:visited {
    color: white !important;
  }
  
  /* Header CTA button */
  header .bg-gradient-gold,
  header a.bg-gradient-gold {
    background: linear-gradient(to right, var(--gold-start), var(--gold-end)) !important;
    color: var(--text-dunkel) !important;
  }
  
  /* Fix sticky navigation width and layout */
  .sticky {
    top: 60px !important; /* Adjust for mobile header height */
  }
  
  .sticky nav {
    padding: 0.75rem 0 !important;
  }
  
  .sticky nav > div {
    max-width: 100% !important;
    padding: 0 1rem !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  
  /* Navigation links - better mobile sizing */
  .sticky nav a {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Improve touch targets */
  .sticky nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Better button layout in sections */
  section .flex.flex-col.gap-4.sm\:flex-row,
  section .flex.flex-col.items-center.justify-center.gap-4.sm\:flex-row {
    gap: 1rem !important;
  }
  
  section .inline-block.w-full.sm\:w-auto {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Fix header layout on mobile */
  header .container {
    padding: 0.75rem 1rem !important;
  }
  
  header .flex.items-center.gap-4 {
    gap: 0.75rem !important;
  }
  
  header .min-w-\[140px\] {
    min-width: 120px !important;
    font-size: 0.875rem !important;
    padding: 0 1rem !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  /* Make navigation even more compact */
  .sticky nav > div {
    gap: 0.25rem !important;
  }
  
  .sticky nav a {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.6rem !important;
  }
  
  /* Header adjustments */
  header h2 {
    font-size: 1rem !important;
  }
  
  header .min-w-\[120px\] {
    min-width: 100px !important;
    font-size: 0.8rem !important;
  }
  
  /* Better button spacing */
  section .flex.flex-col.gap-4.sm\:flex-row {
    gap: 0.75rem !important;
  }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .sticky {
    top: 50px !important;
  }
  
  .sticky nav {
    padding: 0.5rem 0 !important;
  }
  
  .sticky nav a {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.6rem !important;
  }
}

/* Ensure proper color inheritance */
@media (max-width: 768px) {
  /* Override any default link styles */
  a:not(.bg-gradient-gold):not([class*="bg-gradient"]) {
    color: inherit !important;
  }
  
  /* Specific overrides for navigation */
  nav a:not(.bg-gradient-gold):not([class*="bg-gradient"]) {
    color: var(--text-hell) !important;
  }
  
  nav a:not(.bg-gradient-gold):not([class*="bg-gradient"]):hover {
    color: var(--bordeaux-start) !important;
  }
  
  /* Ensure buttons maintain their styling */
  .rounded-full.bg-gradient-gold {
    background: linear-gradient(to right, var(--gold-start), var(--gold-end)) !important;
    color: var(--text-dunkel) !important;
  }
  
  .rounded-full.border-2.border-\[var\(--gold-start\)\] {
    border-color: var(--gold-start) !important;
    color: white !important;
  }
}