/* ============================================================
   Zahntechnik Tekin – Soft UI Design System
   ============================================================ */

/* ── Design-Variablen ───────────────────────────────────────── */
:root {
  --sof-bg:        #e8edf2;
  --sof-dark:      #c5cad3;
  --sof-lite:      #ffffff;
  --blue-primary:  #2563eb;
  --blue-dark:     #1e3a8a;
  --text-dark:     #0f172a;
}

/* ── Global ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  background-color: var(--sof-bg);
  color: var(--text-dark);
}

/* ── Fokus (WCAG 2.1 AA) ────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--blue-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========================================================== */
/*  SCROLL REVEAL                                             */
/* ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ========================================================== */
/*  SOFT UI SURFACES                                          */
/* ========================================================== */
.soft-raised {
  background: var(--sof-bg);
  box-shadow: 6px 6px 14px var(--sof-dark), -6px -6px 14px var(--sof-lite);
}
.soft-raised-sm {
  background: var(--sof-bg);
  box-shadow: 3px 3px 8px var(--sof-dark), -3px -3px 8px var(--sof-lite);
}
.soft-raised-xl {
  background: var(--sof-bg);
  box-shadow: 14px 14px 28px var(--sof-dark), -14px -14px 28px var(--sof-lite);
}
.soft-inset {
  background: var(--sof-bg);
  box-shadow: inset 4px 4px 8px var(--sof-dark), inset -4px -4px 8px var(--sof-lite);
}

/* Hover-Lift für Karten */
@media (prefers-reduced-motion: no-preference) {
  .soft-raised {
    transition: box-shadow 0.28s ease, transform 0.28s ease;
  }
  .soft-raised:hover {
    transform: translateY(-4px);
    box-shadow: 10px 10px 22px var(--sof-dark), -10px -10px 22px var(--sof-lite);
  }
}

/* ── Glassmorphism (Hero) ────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ========================================================== */
/*  BUTTONS                                                   */
/* ========================================================== */
.soft-btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 5px 5px 12px rgba(37, 99, 235, 0.40),
              -3px -3px 8px rgba(255, 255, 255, 0.70);
  color: #fff;
  border: none;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.soft-btn-primary:hover {
  box-shadow: 7px 7px 18px rgba(37, 99, 235, 0.50),
              -4px -4px 10px rgba(255, 255, 255, 0.80);
  transform: translateY(-2px);
  color: #fff;
}
.soft-btn-primary:active {
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.20),
              inset -2px -2px 6px rgba(255, 255, 255, 0.20);
  transform: translateY(0);
}

.soft-btn-ghost {
  background: var(--sof-bg);
  box-shadow: 5px 5px 12px var(--sof-dark), -5px -5px 12px var(--sof-lite);
  border: none;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.soft-btn-ghost:hover {
  box-shadow: 7px 7px 18px var(--sof-dark), -7px -7px 18px var(--sof-lite);
  transform: translateY(-2px);
}
.soft-btn-ghost:active {
  box-shadow: inset 3px 3px 8px var(--sof-dark), inset -3px -3px 8px var(--sof-lite);
  transform: translateY(0);
}

/* Hero Ghost Button */
.btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.50);
  color: #fff;
}

/* ========================================================== */
/*  FORMULAR-INPUTS                                           */
/* ========================================================== */
.soft-input {
  background: var(--sof-bg) !important;
  box-shadow: inset 3px 3px 7px var(--sof-dark),
              inset -3px -3px 7px var(--sof-lite) !important;
  border: none !important;
  transition: box-shadow 0.2s ease;
}
.soft-input:focus {
  outline: none !important;
  box-shadow: inset 3px 3px 7px var(--sof-dark),
              inset -3px -3px 7px var(--sof-lite),
              0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* ========================================================== */
/*  SERVICE ICON WRAPPER                                      */
/* ========================================================== */
.service-icon {
  width: 3rem;
  height: 3rem;
  background: var(--sof-bg);
  box-shadow: inset 3px 3px 6px var(--sof-dark), inset -3px -3px 6px var(--sof-lite);
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.soft-raised:hover .service-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 3px 3px 8px rgba(37,99,235,0.35), -2px -2px 6px rgba(255,255,255,0.5);
}
.soft-raised:hover .service-icon svg {
  color: #ffffff;
}
.service-icon svg {
  color: var(--blue-primary);
  transition: color 0.25s ease;
}

/* ========================================================== */
/*  NAVBAR                                                    */
/* ========================================================== */
.navbar-scrolled {
  box-shadow: 0 4px 16px var(--sof-dark), 0 -2px 8px rgba(255,255,255,0.6) !important;
}

/* ========================================================== */
/*  FAQ ACCORDION                                             */
/* ========================================================== */
details summary svg {
  transition: transform 0.22s ease;
}
details[open] summary svg {
  transform: rotate(180deg);
}
details[open] > summary {
  color: var(--blue-primary);
}

/* ========================================================== */
/*  GALERIE                                                   */
/* ========================================================== */
.gallery-item {
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 6px 6px 14px var(--sof-dark), -6px -6px 14px var(--sof-lite);
}
.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img {
  transform: scale(1.06);
}

/* ========================================================== */
/*  REDUCED MOTION                                            */
/* ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================== */
/*  PRINT                                                     */
/* ========================================================== */
@media print {
  header, footer, form, nav { display: none; }
  body  { font-size: 11pt; color: #000; background: #fff !important; }
  a     { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}