/* ============================================================
   Panther Racing — Design 3 (Hell-Mix)
   Hell/Dunkel alternierend, Rot- + Schwarz-/Grau-Palette
   ============================================================ */

/* ── SCROLL-ANIMATION (CSS-basiert, IntersectionObserver via base.html) ── */
.d3-anim {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .65s cubic-bezier(.22,.68,0,1.1),
              transform .65s cubic-bezier(.22,.68,0,1.1);
  transition-delay: calc(var(--d3-i, 0) * 90ms);
}
.d3-anim.d3-in { opacity: 1; transform: none; }

.d3-anim-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--d3-i, 0) * 80ms);
}
.d3-anim-left.d3-in { opacity: 1; transform: none; }

.d3-anim-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--d3-i, 0) * 80ms);
}
.d3-anim-right.d3-in { opacity: 1; transform: none; }

.d3-anim-scale {
  opacity: 0; transform: scale(.93);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--d3-i, 0) * 80ms);
}
.d3-anim-scale.d3-in { opacity: 1; transform: none; }

/* ── D3 HERO — SPLIT ── */
.d3-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.d3-hero-left {
  background: #080808;
  display: flex; flex-direction: column;
  justify-content: center; padding: 120px 64px 80px;
  position: relative; overflow: hidden;
}
.d3-hero-left::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, transparent, #cc0000, transparent);
}
.d3-hero-right {
  position: relative; overflow: hidden;
  min-height: 50vh;
}
.d3-hero-right img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(30%) contrast(1.1);
}
.d3-hero-right-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,8,8,.3) 0%, transparent 60%);
}
.d3-hero-eyebrow {
  font-family: var(--ff-c);
  font-weight: 700; font-size: .75rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: #cc0000; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.d3-hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 2px; background: #cc0000;
}
.d3-hero-left h1 {
  font-family: var(--ff-d);
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: .88; text-transform: uppercase;
  margin-bottom: 28px;
}
.d3-hero-left h1 em {
  font-style: normal; color: #cc0000; display: block;
}
.d3-hero-sub {
  font-size: .95rem; color: #999; max-width: 400px;
  line-height: 1.8; margin-bottom: 40px;
}
.d3-year-badge {
  position: absolute; bottom: 40px; left: 64px;
  font-family: var(--ff-d); font-size: 1rem;
  letter-spacing: .25em; color: #2a2a2a;
  text-transform: uppercase;
}

/* ── D3 LIGHT SECTION ── */
.d3-light {
  background: #f0f0f0;
  color: #111;
}
.d3-light .section-label {
  color: #cc0000;
}
.d3-light .section-label::before {
  background: #cc0000;
}
.d3-light .section-title { color: #111; }
.d3-light .lead { color: #555; }
.d3-light h2, .d3-light h3, .d3-light h4 { color: #111; }

/* ── D3 EVENTS — NUMMERIERTE KARTEN ── */
.d3-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: #d4d4d4;
}
.d3-event-card {
  background: #fff;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.d3-card-img-wrap { overflow: hidden; height: 200px; position: relative; }
.d3-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(25%);
  transition: transform .5s ease, filter .3s;
}
.d3-event-card:hover .d3-card-img { transform: scale(1.04); filter: grayscale(0); }
.d3-event-num {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--ff-d); font-size: 1.2rem;
  background: #cc0000; color: #fff;
  padding: 2px 10px; letter-spacing: .04em;
  z-index: 1;
}
.d3-event-card.past { opacity: .5; pointer-events: none; }
.d3-card-body {
  padding: 20px 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.d3-card-date {
  font-family: var(--ff-c); font-weight: 700;
  font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: #cc0000;
}
.d3-card-title {
  font-family: var(--ff-d); font-size: 1.6rem;
  line-height: 1; text-transform: uppercase; color: #111;
}
.d3-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--ff-c); font-weight: 600;
  font-size: .78rem; letter-spacing: .06em; color: #888;
}
.d3-card-meta i { color: #cc0000; margin-right: 4px; }
.d3-card-price {
  font-family: var(--ff-d); font-size: 1.4rem; color: #111;
  border-top: 1px solid #e8e8e8; padding-top: 10px; margin-top: 4px;
}
.d3-card-actions {
  display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
/* Button im D3-Kontext: Default bleibt style.css (#ff0000) */
.d3-card-actions .btn {
  background: #cc0000; flex: 1; justify-content: center;
  font-size: .8rem; padding: 10px 16px; min-width: 90px;
}
.d3-card-actions .btn:hover { background: #aa0000; }
/* btn-outline auf hellen Karten: dunkel */
.d3-root .d3-card-actions .btn.btn-outline,
.d3-root .d3-card-actions a.btn-outline {
  background: transparent;
  border: 2px solid #222;
  color: #222;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
}
.d3-root .d3-card-actions .btn.btn-outline:hover,
.d3-root .d3-card-actions a.btn-outline:hover {
  background: #222;
  color: #fff;
}

/* ── D3 STATS (dunkel) ── */
.d3-stats {
  background: #0d0d0d;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid #cc0000;
}
.d3-stat-item {
  padding: 48px 20px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.05);
}
.d3-stat-item:last-child { border-right: none; }
.d3-stat-num {
  font-family: var(--ff-d);
  font-size: clamp(2.6rem, 4.5vw, 4.5rem);
  color: #cc0000; display: block; line-height: 1;
}
.d3-stat-label {
  font-family: var(--ff-c); font-weight: 600;
  font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: #444;
  margin-top: 8px; display: block;
}

/* ── D3 TEAM — KARTEN AUF HELL ── */
.d3-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px;
  background: #d4d4d4;
}
.d3-team-card {
  background: #fff;
  overflow: hidden;
  position: relative;
}
.d3-team-card img {
  width: 100%; height: 220px;
  object-fit: cover; display: block;
  filter: grayscale(60%);
  transition: filter .4s;
}
.d3-team-card:hover img { filter: grayscale(0); }
.d3-team-card-info {
  padding: 14px 16px;
  border-top: 2px solid #cc0000;
}
.d3-team-name {
  font-family: var(--ff-c); font-weight: 700;
  font-size: .88rem; letter-spacing: .08em;
  text-transform: uppercase; color: #111;
}
.d3-team-role { font-size: .78rem; color: #888; margin-top: 3px; }

/* ── D3 PAGE HERO (Unterseiten) ── */
.d3-page-hero {
  background: #111;
  padding: 140px 0 56px;
  border-bottom: 3px solid #cc0000;
}
.d3-page-hero .section-label { color: #cc0000; margin-bottom: 12px; }
.d3-page-hero .section-label::before { background: #cc0000; }
.d3-page-hero h1 {
  font-family: var(--ff-d);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  text-transform: uppercase; line-height: .9; color: #fff;
}
.d3-page-hero h1 span { color: #cc0000; }
.d3-page-hero p { color: #777; margin-top: 12px; font-size: .95rem; letter-spacing: .08em; }

/* ── D3 INFOS — GRID AUF HELL ── */
.d3-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px; background: #d4d4d4;
}
.d3-info-item {
  background: #fff; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.d3-info-num {
  font-family: var(--ff-d); font-size: 3rem;
  color: #cc0000; line-height: 1;
}
.d3-info-title {
  font-family: var(--ff-d); font-size: 1.5rem;
  text-transform: uppercase; color: #111;
}
.d3-info-text { font-size: .9rem; color: #666; line-height: 1.7; }

/* ── D3 FEATURE DARK (alternierend, für drivingschool & index) ── */
.d3-feature-wrap { display: flex; flex-direction: column; }
.d3-feature-dark {
  background: #111; color: #fff;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 400px;
}
.d3-feature-dark.reverse {
  direction: rtl;
}
.d3-feature-dark.reverse > * { direction: ltr; }
.d3-feature-dark img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(30%);
}
.d3-feature-dark-text {
  padding: 64px 52px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.d3-feature-dark-text .section-label { color: #cc0000; }
.d3-feature-dark-text .section-label::before { background: #cc0000; }
.d3-feature-dark-text .section-title {
  color: #fff; font-size: clamp(2rem, 4vw, 3.2rem);
}
.d3-feature-dark-text .section-title .accent { color: #cc0000; }
.d3-feature-dark-text .lead { color: #999; }

/* ── D3 ABOUT (hell) ── */
.d3-about {
  background: #f0f0f0; color: #111;
  padding: 96px 0;
}
.d3-about-inner {
  max-width: 820px;
  display: grid; gap: 40px;
}
.d3-about-quote {
  font-family: var(--ff-d);
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  line-height: 1.05; text-transform: uppercase; color: #111;
  border-left: 4px solid #cc0000; padding-left: 28px;
}
.d3-about-quote em { font-style: normal; color: #cc0000; }
.d3-about-text { font-size: .95rem; color: #555; line-height: 1.8; }

/* ── D3 CTA ── */
.d3-cta {
  background: #0d0d0d;
  padding: 96px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── EVENT DETAIL (light) ── */
.d3-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: start;
}
.d3-booking-box {
  background: #fff;
  border: 1px solid #ddd;
  border-top: 3px solid #cc0000;
  padding: 32px;
  position: sticky;
  top: 100px;
}
.d3-booking-price-label {
  font-family: var(--ff-c); font-weight: 700;
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: #cc0000; margin-bottom: 8px;
}
.d3-booking-price {
  font-family: var(--ff-d); font-size: 2.4rem;
  color: #111; line-height: 1; margin-bottom: 24px;
}
.d3-booking-meta {
  display: flex; flex-direction: column; gap: 8px;
  font-size: .85rem; color: #666; margin-bottom: 24px;
}
.d3-booking-meta i { color: #cc0000; width: 20px; }
.d3-highlights {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 28px;
}
.d3-highlights li {
  display: flex; align-items: center; gap: 12px;
  font-size: .9rem; color: #333;
}
.d3-highlights li::before {
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #cc0000; flex-shrink: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .d3-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .d3-booking-box { position: static; }
}

@media (max-width: 900px) {
  /* Hero */
  .d3-hero { grid-template-columns: 1fr; }
  .d3-hero-right { min-height: 45vw; order: -1; }
  .d3-hero-left { padding: 72px 28px 56px; }
  .d3-hero-left::after { display: none; }
  .d3-hero-sub { max-width: 100%; }
  .d3-year-badge { display: none; }

  /* Stats */
  .d3-stats { grid-template-columns: repeat(2, 1fr); }
  .d3-stat-item:nth-child(2) { border-right: none; }

  /* Feature dark */
  .d3-feature-dark { grid-template-columns: 1fr; min-height: auto; }
  .d3-feature-dark.reverse { direction: ltr; }
  .d3-feature-dark img { height: 260px; order: -1; }
  .d3-feature-dark-text { padding: 44px 28px; }

  /* Team */
  .d3-team-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  /* Info */
  .d3-info-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* About */
  .d3-about-inner { gap: 28px; }
  .d3-about-quote { padding-left: 20px; }

  /* Page hero */
  .d3-page-hero { padding: 120px 0 44px; }

  /* Events grid */
  .d3-events-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 640px) {
  /* Stats: 2 columns */
  .d3-stats { grid-template-columns: 1fr 1fr; }
  .d3-stat-item { padding: 28px 12px; }
  .d3-stat-item:nth-child(2) { border-right: 1px solid rgba(255,255,255,.05); }

  /* Hero */
  .d3-hero-left { padding: 64px 20px 48px; }
  .d3-hero-left h1 { font-size: clamp(3.2rem, 15vw, 4.5rem); }
  .d3-hero-right { min-height: 55vw; }

  /* Events */
  .d3-events-grid { grid-template-columns: 1fr; }
  .d3-card-actions { flex-direction: column; }
  .d3-card-actions .btn { flex: none; width: 100%; }

  /* Feature dark */
  .d3-feature-dark-text { padding: 32px 20px; }

  /* Page hero */
  .d3-page-hero { padding: 100px 0 36px; }

  /* Light sections */
  .d3-about { padding: 64px 0; }
  .d3-cta { padding: 64px 0; }
  .d3-about-quote { font-size: clamp(1.6rem, 8vw, 2.4rem); }

  /* Info grid */
  .d3-info-grid { grid-template-columns: 1fr; }

  /* Team grid */
  .d3-team-grid { grid-template-columns: repeat(2, 1fr); }
  .d3-team-card img { height: 180px; }
}

@media (max-width: 400px) {
  .d3-team-grid { grid-template-columns: 1fr; }
  .d3-stats { grid-template-columns: 1fr; }
  .d3-stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.05); }
}