/* ARTprotect — Tailwind Ergänzungen
   Nur Styles die Tailwind CDN nicht über Utility-Klassen abbilden kann:
   - Schritt-Nummerierung via CSS-Counter
   - Hero-Ken-Burns-Effekt
   - FAQ-Toggle-Pfeil via ::after
   - Font-Basis
*/

/* Google Fonts werden im HTML-Head geladen */
body { font-family: 'Source Serif 4', Georgia, serif; }

/* ── Hero Ken-Burns ─────────────────────────────────── */
.hero-bg {
  transform: scale(1.04);
  transition: transform 12s ease;
}
section:hover .hero-bg { transform: scale(1.0); }

/* ── Prozessschritte — CSS-Counter ──────────────────── */
.ap-steps { counter-reset: steps; }
.ap-steps > li { counter-increment: steps; }
.ap-steps > li::before {
  content: counter(steps);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #960018;
  opacity: 0.28;
  flex-shrink: 0;
  width: 2rem;
  text-align: right;
  line-height: 1;
  padding-top: 0.15rem;
}

/* ── FAQ Pfeil ──────────────────────────────────────── */
.faq-q::after {
  content: '+';
  color: #960018;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: -0.1rem;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP NAV DROPDOWN
   Trigger: li.nav-item:hover → .nav-dropdown sichtbar
   ═══════════════════════════════════════════════════════ */

/* Nav-Item: streckt sich auf volle Nav-Höhe → kein Spalt zur Dropdown */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown initial versteckt */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;          /* direkt unter dem <li>, kein Spalt */
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  /* kein padding-top — Dropdown sitzt nahtlos an der Nav */
}

/* Hover auf <li> öffnet Dropdown */
.nav-item:hover .nav-dropdown { display: block; }

/* Dropdown-Box */
.nav-dropdown-inner {
  background:    #ffffff;
  border:        1px solid #e8e8e8;
  border-top:    none;                   /* nahtloser Übergang zur Nav */
  border-radius: 0 0 12px 12px;         /* oben eckig, unten abgerundet */
  box-shadow:    0 12px 40px rgba(0, 0, 0, 0.12);
  padding:       6px;
  white-space:   nowrap;
  min-width:     200px;
}

/* Dropdown-Links */
.nav-dropdown-inner a {
  display:         block;
  padding:         9px 16px;
  font-family:     'Montserrat', 'Helvetica Neue', sans-serif;
  font-size:       0.72rem;
  font-weight:     600;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  color:           #4a4a4a;
  text-decoration: none;
  border-radius:   8px;
  transition:      background-color 0.15s, color 0.15s;
}
.nav-dropdown-inner a:hover {
  background-color: #fdf0f2;
  color:            #960018;
}

/* Chevron dreht sich beim Hover */
.nav-chevron { transition: transform 0.2s; }
.nav-item:hover .nav-chevron { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════
   BUTTON-SYSTEM — Drei Varianten + Text-Link
   Verwendung:  class="btn-primary"  /  class="btn-ghost"
                class="btn-outline"  /  class="btn-text"
   ═══════════════════════════════════════════════════════ */

/* Gemeinsame Basis */
.btn-primary,
.btn-ghost,
.btn-outline {
  display:        inline-block;
  font-family:    'Montserrat', 'Helvetica Neue', sans-serif;
  font-size:      0.82rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        0.875rem 2rem;      /* py-3.5 px-8 */
  border-radius:  9999px;
  border:         2px solid transparent;
  text-decoration: none;
  text-align:     center;
  transition:     background-color 0.2s, border-color 0.2s,
                  box-shadow 0.2s, transform 0.15s;
  cursor:         pointer;
}

/* Primär — Rot gefüllt (auf hellen + dunklen Flächen) */
.btn-primary {
  background-color: #960018;
  color:            #ffffff;
  border-color:     #960018;
}
.btn-primary:hover {
  background-color: #720012;
  border-color:     #720012;
  transform:        translateY(-1px);
  box-shadow:       0 8px 20px rgba(150, 0, 24, 0.28);
}

/* Ghost — Transparenter Rahmen, weiße Schrift (auf dunklen/roten Flächen) */
.btn-ghost {
  background-color: transparent;
  color:            #ffffff;
  border-color:     rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  border-color:     #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Outline — Roter Rahmen, rote Schrift (auf hellen Flächen) */
.btn-outline {
  background-color: transparent;
  color:            #960018;
  border-color:     #960018;
}
.btn-outline:hover {
  background-color: #fdf0f2;
}

/* Text-Link — Pfeil-Variante für Blog / Karten */
.btn-text {
  display:         inline-flex;
  align-items:     center;
  gap:             0.35rem;
  font-family:     'Montserrat', 'Helvetica Neue', sans-serif;
  font-size:       0.72rem;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           #960018;
  text-decoration: none;
  transition:      color 0.2s, gap 0.15s;
}
.btn-text:hover {
  color: #720012;
  gap:   0.55rem;
}