/*
Theme Name: MM Performance
Theme URI: https://m-m-performance.de
Author: MM Performance
Description: Individuelles Theme für MM Performance - KFZ Service, Ölwechsel, Reifenwechsel, HU/AU im Haus über DEKRA und Ersatzwagen.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mm-performance
*/

/* ── Fonts & Variables ──────────────────────────────────────────── */
@font-face {
  font-family: "Nulshock";
  src: url("assets/fonts/Nulshock.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --display-font: "Nulshock", Arial, Helvetica, sans-serif;
  --purple:      #8b3298;
  --purple-dark: #622173;
  --ink:         #111014;
  --muted:       #68616c;
  --line:        #e7e0ea;
  --page:        #f5f3f6;
  --soft:        #f7f3f8;
  --surface:     #fbfafc;
  --white:       #ffffff;
  --shadow:      0 20px 55px rgba(28, 18, 34, 0.12);
}

/* ── Reset ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; }

h1, h2, h3, p { margin-top: 0; }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 16px 22px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  transition: box-shadow 180ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(20,10,25,0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 102px;
}

.brand img { width: 100%; height: auto; object-fit: contain; }

/* ── Menu Toggle ────────────────────────────────────────────────── */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 3px auto;
  border-radius: 999px;
  background: var(--purple-dark);
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle.is-open span:nth-child(1) { transform: translateY(8px)  rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Nav ────────────────────────────────────────────────────────── */
.main-nav {
  position: fixed;
  inset: 66px 18px auto 18px;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.main-nav a {
  padding: 12px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 700;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  background: var(--soft);
  color: var(--purple-dark);
}

/* ── Utilities ──────────────────────────────────────────────────── */
.section-pad { padding: 42px 22px; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--purple-dark);
  font-family: var(--display-font);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}

.section-heading { max-width: 460px; margin-bottom: 26px; }
.section-heading.center { margin-right: auto; margin-left: auto; text-align: center; }
.section-sub { color: var(--muted); font-size: 14px; margin-bottom: 26px; }

/* ── Typography ─────────────────────────────────────────────────── */
h1 { margin-bottom: 0; font-size: clamp(38px,11vw,62px); font-weight: 900; line-height: 0.95; }
h2 { margin-bottom: 10px; font-size: 28px; font-weight: 900; line-height: 1.05; }
h3 { margin-bottom: 6px; font-size: 17px; font-weight: 900; }

.claim { margin: 8px 0 22px; max-width: 340px; font-size: 16px; font-weight: 800; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(98,33,115,0.22);
}

.btn-primary { color: var(--white); background: var(--purple); }

.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: max-content;
  padding: 16px 22px;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid #e0dce3;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
  overflow: visible;
}

.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.btn-wa svg { display: block; overflow: visible; flex-shrink: 0; width: 26px; height: 26px; }

.btn-wa-label {
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #111b21;
  line-height: 1;
  white-space: nowrap;
}

.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--purple-dark); font-weight: 900; }
.text-link::after { content: "→"; font-size: 18px; line-height: 1; transition: transform 180ms ease; }
.text-link.no-arrow::after { content: none; }
.text-link:hover::after, .text-link:focus-visible::after { transform: translateX(4px); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  min-height: 640px;
  min-height: 100svh;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,248,251,0.96) 62%, var(--page) 100%);
}

.hero-copy { position: relative; z-index: 2; align-self: start; }

.hero-actions { display: grid; gap: 8px; width: min(100%,176px); }

.hero-media {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(74vw,320px);
}

.hero-media img { width: 100%; }

/* ── Services ───────────────────────────────────────────────────── */
.services { background: linear-gradient(180deg, var(--page) 0%, var(--white) 22%, var(--white) 100%); }

.service-list {
  display: grid;
  gap: 30px;
}

.service-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  padding: 0;
}

.service-item p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.service-icon {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.service-icon img {
  width: 26px;
  height: 26px;
  filter: invert(20%) sepia(52%) saturate(1553%) hue-rotate(266deg) brightness(72%) contrast(93%);
}

.service-more { display: flex; justify-content: center; margin-top: 36px; }

/* ── Location ───────────────────────────────────────────────────── */
.location { background: linear-gradient(180deg, var(--white) 0%, var(--surface) 42%, var(--page) 100%); }

.location-inner { display: grid; gap: 24px; }

.location-info { text-align: center; }
.location-info p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-bottom: 0; line-height: 1.6; }
.location-info .eyebrow { text-align: center; }

.opening-hours { max-width: 300px; margin: 0 auto; border-top: 1px solid var(--line); }

.oh-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.oh-row:last-child { border-bottom: none; }

.oh-days { font-size: 13px; font-weight: 800; color: var(--ink); min-width: 72px; }
.oh-time  { font-size: 13px; color: var(--muted); flex: 1; }

.oh-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.oh-badge--open { background: rgba(34,139,34,0.10); color: #1a7a1a; }
.oh-badge--note { background: rgba(139,50,152,0.10); color: var(--purple-dark); }

/* ── Map ────────────────────────────────────────────────────────── */
.map-shell {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0) 44%), #dfeee8;
  box-shadow: 0 12px 35px rgba(28,18,34,0.1);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.map-link { color: var(--ink); }
.map-link:hover, .map-link:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(28,18,34,0.15); }
.map-link:hover .map-cta, .map-link:focus-visible .map-cta { background: var(--purple-dark); box-shadow: 0 10px 28px rgba(139,50,152,0.4); }

.map-cta {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(139,50,152,0.3);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.map-cta svg { fill: var(--white); flex-shrink: 0; }

.map-park { position: absolute; right: -28px; top: -34px; width: 42%; height: 78%; border-radius: 34% 0 0 46%; background: #a9dac2; }

.map-road { position: absolute; width: 120%; height: 26px; border-radius: 999px; background: #ffffff; box-shadow: inset 0 0 0 1px #d7dfe0; }
.map-road::after { content: none; }
.map-road-one   { left: -18%; top: 58%; transform: rotate(-18deg); }
.map-road-two   { left:   6%; top: 26%; transform: rotate(62deg); }
.map-road-three { left: -22%; top: 14%; transform: rotate(6deg); }

.map-pin {
  position: absolute;
  left: 52%;
  top: 43%;
  width: 22px;
  height: 22px;
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  background: #e94040;
  box-shadow: 0 8px 18px rgba(60,20,20,0.25);
  transform: rotate(-45deg);
}
.map-pin::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--white); }

.map-label {
  position: absolute;
  left: calc(52% + 26px);
  top: 43%;
  display: grid;
  min-width: 118px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 22px rgba(28,18,34,0.12);
  font-size: 12px;
  line-height: 1.15;
}
.map-label small { color: var(--muted); font-size: 10px; }

/* ── Rental ─────────────────────────────────────────────────────── */
.rental {
  display: grid;
  gap: 18px;
  background: linear-gradient(180deg, var(--page) 0%, var(--white) 38%, var(--white) 100%);
}

.rental-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: visible;
  padding: 8px 0 36px;
}
.rental-media::after {
  content: "";
  position: absolute;
  right: 13%; bottom: 24px; left: 13%;
  z-index: 0;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(17,16,20,0.25) 0%, rgba(17,16,20,0.12) 46%, rgba(17,16,20,0) 72%);
  filter: blur(7px);
}
.rental-media img { position: relative; z-index: 1; width: min(100%,520px); filter: drop-shadow(0 16px 22px rgba(20,20,20,0.12)); }
.rental-copy p:last-child { margin-bottom: 0; color: var(--muted); }

/* ── Social ─────────────────────────────────────────────────────── */
.social-section { background: var(--page); }

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.social-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  border-radius: 16px;
  min-height: 130px;
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
}

.social-card[data-platform="instagram"] { background: var(--white); }
.social-card[data-platform="instagram"] .social-name,
.social-card[data-platform="instagram"] .social-handle { color: #111; }
.social-card[data-platform="instagram"] .social-handle { color: rgba(0,0,0,0.55); }

.social-card[data-platform="tiktok"]   { background: #000; }
.social-card[data-platform="youtube"]  { background: var(--white); }
.social-card[data-platform="youtube"] .social-name,
.social-card[data-platform="youtube"] .social-handle { color: #111; }
.social-card[data-platform="youtube"] .social-handle { color: rgba(0,0,0,0.55); }
.social-card[data-platform="facebook"] { background: #1877f2; }

.social-bg-icon { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; }
.social-bg-icon img { width: 48px; height: 48px; display: block; }

.social-name   { font-size: 15px; font-weight: 900; line-height: 1.2; position: relative; z-index: 1; }
.social-handle {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Contact ────────────────────────────────────────────────────── */
.contact { background: linear-gradient(180deg, var(--white) 0%, #f3eef5 100%); }

.section-heading p:last-child { margin-bottom: 0; color: var(--muted); }

.contact-methods { display: grid; gap: 12px; max-width: 560px; margin-bottom: 18px; overflow: visible; }

.form-helper { max-width: 560px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }

.contact-form { display: grid; gap: 13px; max-width: 560px; }

.contact-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 800; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d9cfdd;
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--white);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 3px solid rgba(139,50,152,0.18); border-color: var(--purple); }

.form-note { min-height: 20px; margin: 0; color: var(--purple-dark); font-size: 13px; font-weight: 800; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 34px 22px;
  color: var(--white);
  background: var(--purple);
  text-align: center;
}
.footer-brand { font-size: 20px; font-weight: 900; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 14px; font-weight: 800; }
.site-footer p { margin: 0; font-size: 12px; opacity: 0.78; }

/* ── Legal ──────────────────────────────────────────────────────── */
.legal-section { background: var(--white); }
.legal-content { max-width: 740px; }
.legal-content h2 { margin-top: 32px; margin-bottom: 8px; font-size: 18px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 15px; line-height: 1.65; }
.legal-content ul { padding-left: 20px; margin: 0 0 14px; }
.legal-content a { color: var(--purple-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ── Reveal animation ───────────────────────────────────────────── */
.reveal { opacity: 1; transform: translateY(0); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .social-card.reveal { opacity: 1; transform: none; transition: none; }

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Tablet 720px ───────────────────────────────────────────────── */
@media (min-width: 720px) {
  .site-header { padding: 22px clamp(32px,6vw,72px); }
  .brand { width: 148px; }
  .menu-toggle { display: none; }

  .main-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .main-nav a { padding: 10px 18px; font-size: 17px; }

  .eyebrow { font-size: 15px; }
  .section-pad { padding: 76px clamp(32px,7vw,90px); }

  .hero {
    grid-template-columns: minmax(300px,0.95fr) minmax(330px,1.05fr);
    align-items: end;
    min-height: 620px;
    padding-top: 50px;
  }
  .hero-copy { padding-bottom: 56px; }
  .hero-copy .claim { font-size: 17px; max-width: 420px; }
  .hero h1 { font-size: clamp(52px,7vw,78px); white-space: nowrap; }
  .hero .claim { font-size: 18px; max-width: 440px; margin-bottom: 26px; }
  .hero .btn { font-size: 16px; padding: 13px 26px; min-height: 48px; }
  .hero-media { position: relative; right: auto; bottom: auto; align-self: end; justify-self: end; width: min(38vw,400px); }
  .hero-actions { grid-template-columns: auto auto; width: auto; justify-content: start; }

  .service-list {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 44px;
  }
  .service-item {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: 14px;
    padding: 0;
  }
  .service-icon { width: 54px; margin-bottom: 4px; }
  .service-icon img { width: 30px; height: 30px; }
  .service-item h3 { font-size: 19px; }
  .service-item p { max-width: 260px; }

  .location-inner { grid-template-columns: 280px 1fr; align-items: stretch; gap: 28px; }
  .map-shell { height: 100% !important; min-height: 260px; max-width: none; margin: 0; }

  .rental { grid-template-columns: minmax(300px,0.9fr) minmax(300px,1fr); align-items: center; }

  .social-grid { grid-template-columns: repeat(4,1fr); gap: 14px; }
  .social-card { min-height: 160px; padding: 20px; }
  .social-name { font-size: 17px; }
  .social-handle { font-size: 12px; }
  .social-bg-icon, .social-bg-icon img { width: 60px; height: 60px; }

  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact .section-heading, .contact-methods, .form-helper, .contact-form { margin-left: auto; margin-right: auto; }
  .contact .section-heading { text-align: center; max-width: 680px; }
  .contact-methods { grid-template-columns: repeat(2,minmax(max-content,1fr)); max-width: 680px; }
  .form-helper { max-width: 680px; }
  .contact-form { max-width: 680px; }
  .contact-form .field-full,
  .contact-form button,
  .form-note { grid-column: 1 / -1; }
}

/* ── Desktop 480px (social grid only) ──────────────────────────── */
@media (min-width: 480px) and (max-width: 719px) {
  .social-grid { grid-template-columns: repeat(4,1fr); }
  .social-handle { font-size: 11px; }
}

/* ── Desktop 1200px ─────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .section-pad { padding: 96px clamp(60px,9vw,140px); }
  .main-nav a { padding: 10px 20px; font-size: 18px; }
  .eyebrow { font-size: 17px; }
  .hero { grid-template-columns: minmax(380px,1fr) minmax(340px,0.85fr); min-height: 680px; }
  .hero h1 { font-size: clamp(68px,6.5vw,92px); }
  .hero .claim { font-size: 20px; max-width: 520px; margin-bottom: 30px; }
  .hero .btn { font-size: 17px; padding: 15px 30px; min-height: 52px; }
  .hero-media { width: min(30vw,380px); }
  .hero-copy .claim { font-size: 19px; max-width: 480px; }
  h2 { font-size: 34px; }
  .service-list { gap: 56px; }
  .service-item { padding: 0; }
  .map-shell { max-width: 960px; height: 380px; }
  .rental { grid-template-columns: minmax(360px,0.85fr) minmax(340px,1fr); gap: 48px; }
  .contact-methods, .contact-form { max-width: 680px; }
}

/* ── Aktionen-Seite ─────────────────────────────────────────────── */
.btn-secondary {
  color: var(--white);
  background: var(--purple);
}

.page-hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, var(--page) 100%);
}
.page-hero h1 { max-width: 780px; margin-bottom: 14px; }
.page-hero p:last-child { max-width: 640px; margin-bottom: 0; color: var(--muted); font-size: 16px; }

.service-cta {
  display: grid;
  gap: 18px;
  background: linear-gradient(180deg, var(--white) 0%, #f3eef5 100%);
}
.service-cta p:last-child { margin-bottom: 0; color: var(--muted); }
.service-cta-actions { display: grid; gap: 10px; align-content: start; }

.campaign-section { background: var(--white); }

.campaign-empty {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: center;
  max-width: 680px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbf9fc);
  box-shadow: 0 14px 34px rgba(28,18,34,0.07);
}
.campaign-empty p { margin-bottom: 0; color: var(--muted); }

.campaign-icon {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--white);
  background: var(--purple);
}
.campaign-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* MM Performance Aktionen Plugin - die Karten-Optik für aktive Aktionen
   liefert das Plugin selbst mit (mmp-aktionen.css), damit sie nicht doppelt
   und potenziell widersprüchlich an zwei Stellen gepflegt wird. */

@media (min-width: 720px) {
  .service-cta { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .service-cta-actions { min-width: 240px; }
}