/* Minimal Custom Styles für Tailwind/Daisy UI Umstellung */

/* Skip-to-content Link Accessibility */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #ffbf47;
  color: #000;
}

/* Smooth Scrolling (falls nicht durch Tailwind/Browser abgedeckt) */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* Verhindert automatische Schriftgrößen-Anpassung auf iOS */
}

/* Mobile Optimizations */
body {
  -webkit-tap-highlight-color: rgba(52, 120, 140, 0.2); /* Brand color with transparency */
  touch-action: manipulation; /* Verbessert Touch-Performance */
}

/* Verbesserte Touch-Targets für Links und Buttons */
a, button {
  touch-action: manipulation;
}

/* Verhindere unerwünschten Zoom bei Fokus auf Inputs auf iOS */
@media screen and (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Mindestens 16px verhindert Auto-Zoom auf iOS */
  }
}

/* Custom Brand Colors für Tailwind werden bereits im HTML definiert */
/* --brand: #34788c, --brand-600: #2d6a7b, --brand-300: #67a9ba */

/* Reveal Animations für JavaScript */
.reveal {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Focus Styles - ergänzend zu Tailwind */
a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
textarea:focus-visible,
.checkbox:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Custom background für Hero-Sektion mit Bildern */
.hero-bg {
  background-image: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), 
                    url('assets/hero.jpg'), 
                    url('assets/hero-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fallback für ältere Browser - wird von Daisy UI überschrieben wenn verfügbar */
.card-hover:hover {
  transform: translateY(-2px);
}

/* Ärzte-Bilder perfekte Zentrierung */
.doctor-image {
  display: block;
  object-fit: contain;
  object-position: center center;
}

/* Sicherstellen dass die Bilder rund bleiben */
.doctor-image.rounded-full {
  aspect-ratio: 1 / 1;
}