/* ========================================================================
   Zahnwerk Eningen — Homepage layout & component styles
   Loads after style.css AND motion.css, scoped to index.php only.
   Generic reveal / SVG-draw / magnetic-button mechanics live in motion.css;
   this file only holds homepage-specific components.
   Motif: a single drawn line (hand-guided, precise, reassuring) recurs
   across the hero accent, the reasons list and the process connector.
   ======================================================================== */

/* The base `svg { max-width:24px; max-height:24px }` reset (style.css) is
   meant for inline icons; the hero accent stroke is a full-bleed line and
   isn't part of the generic [data-draw] system (it's timer-, not
   scroll-triggered), so it needs its own override here. */
.accent-stroke {
  max-width: none;
  max-height: none;
}

/* ========================================================================
   Hero
   ======================================================================== */
.hero-badge {
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft), background 200ms;
}
.hero-badge:hover {
  transform: translateY(-1px);
  background: var(--color-primary-100);
  box-shadow: 0 6px 16px -6px rgba(0, 102, 204, 0.35);
}
.hero-badge:active { transform: translateY(0); }

.hero-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-badge__dot {
    animation: badgePulse 2.4s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
  }
}

/* Replace the static underline bar with the drawn SVG stroke */
.hero-heading__accent { padding-bottom: 0.12em; }
.hero-heading__accent::after { content: none; }
.hero-heading__accent-wrap {
  position: relative;
  display: inline-block;
}
.accent-stroke {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.08em;
  width: 104%;
  height: 0.4em;
  overflow: visible;
  pointer-events: none;
}
.accent-stroke path {
  fill: none;
  stroke: url(#accentStrokeGradient);
  stroke-width: 3.5;
  stroke-linecap: round;
}
/* Initial dashoffset is set inline by home.js (getTotalLength);
   the transition itself is declared once on [data-draw] path / here. */
.accent-stroke path {
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out-expo);
}

/* Ambient glow — slow drift, purely decorative, paused off-screen via JS */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual__glow {
    animation: heroGlowDrift 15s ease-in-out infinite alternate;
  }
  .hero-visual__glow.is-paused { animation-play-state: paused; }
  @keyframes heroGlowDrift {
    0%   { transform: scale(1)     translate(0, 0); }
    50%  { transform: scale(1.09)  translate(2%, -3%); }
    100% { transform: scale(1.02)  translate(-3%, 2%); }
  }
}

.hero-visual__badge {
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft);
}
.hero-visual__badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
}

/* ========================================================================
   Praxisinfo band (address / hours / contact)
   ======================================================================== */
.praxisinfo-section {
  background: var(--color-primary, #1a8fd1);
  padding: 48px 0;
}
.praxisinfo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
}
.praxisinfo-card {
  background: rgba(255, 255, 255, 0.10);
  padding: 32px 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: background 200ms;
}
.praxisinfo-card:hover { background: rgba(255, 255, 255, 0.18); }
.praxisinfo-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms var(--ease-out-soft), background 220ms;
}
.praxisinfo-card:hover .praxisinfo-card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(255, 255, 255, 0.32);
}
.praxisinfo-card__content h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.praxisinfo-card__content address {
  font-style: normal;
  font-size: 15px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 10px;
}
.praxisinfo-hours-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.praxisinfo-hours-table td { font-size: 14px; color: #fff; padding: 3px 0; vertical-align: top; }
.praxisinfo-hours-table td:first-child { width: 90px; color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.praxisinfo-closed td { color: rgba(255, 255, 255, 0.45) !important; }
.praxisinfo-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-top: 10px;
  transition: color 200ms, gap 200ms;
}
.praxisinfo-link:hover { color: #fff; gap: 8px; }
.praxisinfo-link--block { display: flex; font-size: 15px; font-weight: 500; margin-top: 6px; color: #fff; gap: 8px; }
.praxisinfo-link--block:hover { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 860px) {
  .praxisinfo-grid { grid-template-columns: 1fr; background: transparent; gap: 12px; }
  .praxisinfo-card { border-radius: 14px; }
}

/* ========================================================================
   Reasons section (replaces the uniform 4-card USP grid)
   ======================================================================== */
.reasons-section { position: relative; overflow: hidden; }

.reasons-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 900px) {
  .reasons-layout {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-16);
    align-items: start;
  }
  .reasons-intro {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-10));
  }
}

.reasons-intro h2 { margin-bottom: var(--space-4); text-align: left; }
.reasons-intro p {
  color: var(--color-gray-600);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 42ch;
}

.reasons-list-wrap { position: relative; }

.reasons-line {
  position: absolute;
  left: 26px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  height: calc(100% - 8px);
  overflow: visible;
  pointer-events: none;
}
.reasons-line path {
  fill: none;
  stroke: url(#reasonsLineGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.reasons-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.reason-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-gray-200);
  position: relative;
}
.reason-row:first-child { border-top: none; padding-top: 0; }

.reason-row__icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  position: relative;
  z-index: 1;
  transition: border-color 220ms, color 220ms, transform 220ms var(--ease-out-soft), background 220ms;
}
.reason-row__icon svg { width: 22px; height: 22px; }
.reason-row:hover .reason-row__icon,
.reason-row:focus-within .reason-row__icon {
  border-color: var(--color-primary);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  transform: scale(1.07);
}

.reason-row__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-gray-900);
  padding-top: var(--space-2);
}
.reason-row__body p {
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  max-width: 48ch;
}

/* ========================================================================
   Services bento (replaces the uniform 6-card services grid)
   ======================================================================== */
.services-section { position: relative; overflow: hidden; }

.services-header { max-width: 640px; margin: 0 auto var(--space-10); text-align: center; }
.services-header p { color: var(--color-gray-600); font-size: var(--text-lg); }

.services-bento {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 240px;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .services-bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: var(--space-5); }
  .service-tile:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .service-tile:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .service-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .service-tile:nth-child(4) { grid-column: span 3; grid-row: span 1; }
  .service-tile:nth-child(5) { grid-column: span 3; grid-row: span 1; }
  .service-tile:nth-child(6) { grid-column: span 6; grid-row: span 1; }
}

.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.service-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-expo);
}
.service-tile:hover img,
.service-tile:focus-visible img { transform: scale(1.07); }

.service-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 36, 0) 32%, rgba(6, 16, 36, 0.88) 100%);
  transition: background 260ms;
}
.service-tile:hover .service-tile__scrim,
.service-tile:focus-visible .service-tile__scrim {
  background: linear-gradient(180deg, rgba(0, 102, 204, 0.08) 15%, rgba(3, 15, 36, 0.94) 100%);
}

.service-tile__icon {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: var(--space-4) 0 0 var(--space-4);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.service-tile__icon svg { width: 20px; height: 20px; }

.service-tile__body { position: relative; z-index: 1; padding: var(--space-5); }
.service-tile__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}
.service-tile--lg .service-tile__title { font-size: var(--text-2xl); }

.service-tile__text {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  margin-bottom: var(--space-3);
  max-width: 40ch;
}
.service-tile--sm .service-tile__text { display: none; }

.service-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.service-tile__link svg { width: 14px; height: 14px; transition: transform 220ms var(--ease-out-soft); }
.service-tile:hover .service-tile__link svg,
.service-tile:focus-visible .service-tile__link svg { transform: translateX(4px); }

@media (max-width: 639px) {
  .service-tile--sm .service-tile__text { display: block; }
}

.services-footer { text-align: center; margin-top: var(--space-10); }

/* ========================================================================
   Process — animated connector line
   ======================================================================== */
.process-steps { position: relative; }
.process-steps::before { content: none; } /* superseded by .process-connector */

.process-connector {
  position: absolute;
  left: 16.666%;
  top: 26px;
  width: 66.668%;
  height: 30px;
  pointer-events: none;
  z-index: 0;
  display: none;
  overflow: visible;
}
@media (min-width: 768px) { .process-connector { display: block; } }
.process-connector path {
  fill: none;
  stroke: url(#processLineGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0;
  background: none;
  border-radius: 0;
}
.process-number { margin: 0 auto var(--space-5); }

/* ========================================================================
   Testimonials — swipeable on mobile, static grid on desktop
   ======================================================================== */
@media (max-width: 899px) {
  .reviews-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-5);
    padding: 2px 2px var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid .review-card { scroll-snap-align: center; flex: 0 0 86%; }
}

.reviews-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 899px) { .reviews-controls { display: flex; } }

.reviews-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 200ms, color 200ms, transform 150ms;
}
.reviews-arrow svg { width: 16px; height: 16px; }
.reviews-arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.reviews-arrow:active { transform: scale(0.94); }

.reviews-dots { display: flex; align-items: center; gap: 8px; }
.reviews-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray-300);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms, transform 200ms var(--ease-out-soft);
}
.reviews-dot.is-active { background: var(--color-primary); transform: scale(1.35); }

/* ========================================================================
   FAQ polish
   ======================================================================== */
.faq-answer { will-change: height; }

/* ========================================================================
   CTA / jobs teaser
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .cta-section::before {
    animation: ctaDrift 16s ease-in-out infinite alternate;
  }
  @keyframes ctaDrift {
    0%   { transform: translateX(-50%) scale(1); }
    100% { transform: translate(-46%, 4%) scale(1.1); }
  }
}

/* ========================================================================
   Reduced motion: keep line-draws resolved, kill everything ambient
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-visual__glow,
  .cta-section::before,
  .hero-badge__dot {
    animation: none !important;
  }
}