/* Dittrich Steuerberater - Base Styles */

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* <picture> ist nur ein WebP-Wrapper aus dem Output-Filter (webp.php).
   display: contents macht das Element layout-neutral: Source und Img werden
   so behandelt, als waeren sie direkte Kinder des Elternelements. Damit
   wirken Tailwind-Klassen am inneren <img> (absolute, inset-0, w-full,
   h-full, object-cover) genauso wie ohne picture-Wrapper. */
picture {
  display: contents;
}


/* Navigation Dropdown */
.nav-dropdown {
  display: none;
}

.nav-item:hover .nav-dropdown {
  display: block;
}

/* Tab Component */
.tab-content {
  display: none;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .tab-content.active {
    flex-direction: row;
  }
}

/* Skip Link (Accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background: #8b1f35;
  color: #fff;
  font-size: 0.875rem;
}

.skip-link:focus {
  top: 0;
}

/* Parallax – iOS-kompatibel */
.parallax-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* Focus Styles (Accessibility) */
*:focus-visible {
  outline: 2px solid #8b1f35;
  outline-offset: 2px;
}

/* Profile Page: Sticky Sidebar */
@media (min-width: 1024px) {
  .sidebar-sticky {
    position: sticky;
    top: 6rem;
  }
}

/* Hero – Einblende-Animation (CSS-basiert, unabhängig von JavaScript) */
@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-line {
  animation: heroLineIn 0.8s ease-out both;
}
.hero-line:nth-child(1) { animation-delay: 0.4s; }
.hero-line:nth-child(2) { animation-delay: 0.7s; }
.hero-line:nth-child(3) { animation-delay: 1s; }
.hero-line:nth-child(4) { animation-delay: 1.3s; }

.hero-fade {
  animation: heroFadeIn 0.8s ease-out both;
}
/* Reihenfolge im Hero-Container: Subline (2), Buttons (3), Mobile-Hinweis (4) */
.hero-fade:nth-child(2) { animation-delay: 1.9s; }
.hero-fade:nth-child(3) { animation-delay: 2.15s; }
.hero-fade:nth-child(4) { animation-delay: 2.4s; }

/* Nutzer mit reduzierter Bewegung: Inhalte sofort sichtbar, keine Animation */
@media (prefers-reduced-motion: reduce) {
  .hero-line,
  .hero-fade {
    animation: none;
  }
}