/* ============================================================
   MARKETING CHECK PAGE
   ============================================================ */

body {
  background: var(--bg);
  max-width: var(--max-w);
  margin: 0 auto;
  overflow-x: hidden;
}

/* ── Hero Image ──────────────────────────────────────────── */
/* Figma: top 161px, left 29px, 335×435px */
.mc-hero {
  padding: 161px 29px 0;
}

.mc-hero__img {
  width: 335px;
  height: 435px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  display: block;
}

/* ── Heading + Preis ─────────────────────────────────────── */
.mc-intro {
  padding: 24px 29px 0;
}

.mc-heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  color: #262626;
  margin: 0 0 6px;
  line-height: 1.2;
}

/* Preis-Zeile */
.mc-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 2px;
}

/* ── 120€ Strikethrough-Animation ────────────────────────── */
/* 1. Strich zieht sich von links durch "120€" */
.mc-price__old {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--grey);
  position: relative;
  display: inline-block;
}

/* Pseudo-Element zeichnet den Strich */
.mc-price__old::after {
  content: '';
  position: absolute;
  left: 0;
  top: 52%;
  height: 1.5px;
  width: 0;
  background: var(--grey);
  /* Startet nach 0.7s, dauert 0.35s */
  animation: strike-through 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

@keyframes strike-through {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── "Kostenlos" erscheint + Glanz-Sweep ─────────────────── */
/* 2. Erscheint nach dem Strich (1.15s) */
.mc-price__new {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: #262626;
  position: relative;
  overflow: hidden;
  display: inline-block;
  /* Startet unsichtbar, blendet nach Strich ein */
  opacity: 0;
  transform: translateY(4px);
  animation: kostenlos-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards;
}

@keyframes kostenlos-in {
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Glanzlicht huscht drüber (nach Einblenden ~1.65s) */
.mc-price__new::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -80%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  animation: gloss-sweep 0.55s ease-in-out 1.7s forwards;
}

@keyframes gloss-sweep {
  from { left: -80%; }
  to   { left: 140%; }
}

/* ── Beschreibung ────────────────────────────────────────── */
/* Reduzierter Abstand direkt unter dem Preis */
.mc-desc {
  padding: 14px 29px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mc-desc p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #262626;
  margin: 0;
}

/* ── Leistungen ──────────────────────────────────────────── */
/* Figma: label top 948 → gap 948-(739+177)=32px after desc */
.mc-leistungen {
  padding: 32px 29px 0;
}

.mc-leistungen__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--grey);
  margin: 0 0 8px;
}

.mc-leistungen__tags {
  display: flex;
}

.mc-leistungen__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mc-leistungen__col span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--dark);
  line-height: 1.35;
}

/* ── Foto-Karussell ──────────────────────────────────────── */
/* Figma: top 1104, left -224px → overflow links raus, 3×253×328px */
.mc-carousel-wrap {
  margin-top: 48px;
  overflow: hidden;
}

.mc-carousel {
  display: flex;
  gap: 41px;
  padding-left: 29px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mc-carousel::-webkit-scrollbar { display: none; }

.mc-carousel__item {
  flex-shrink: 0;
  width: 253px;
  height: 328px;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
}

.mc-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── FAQ / Ablauf ────────────────────────────────────────── */
/* Figma: headings grey 24px Darker Grotesque, text 16px DM Sans Bold */
.mc-faq {
  padding: 64px 29px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mc-faq__heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  color: var(--grey);
  line-height: 1.3;
  margin: 0 0 12px;
}

.mc-faq__text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #262626;
  margin: 0;
}

/* ── Formular Section ────────────────────────────────────── */
/* Figma: heading top 2218, teaser text top 2303 */
.mc-form-section {
  padding: 64px 29px 0;
}

.mc-form-teaser {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey);
  margin: 0 0 32px;
}

.mc-form-heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #262626;
  margin: 0 0 32px;
}

/* ── Formular-Felder (Underline-Stil) ────────────────────── */
.mc-form {
  display: flex;
  flex-direction: column;
}

/* Jedes Feld: Label grau oben, Input/Textarea, Border unten */
.mc-field {
  position: relative;
  padding-top: 8px;
  border-bottom: 1px solid var(--dark);
  margin-bottom: 0;
}

.mc-field + .mc-field {
  margin-top: 24px;
}

.mc-field label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--grey);
  margin-bottom: 4px;
  pointer-events: none;
}

.mc-field input,
.mc-field textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--dark);
  outline: none;
  padding: 4px 0 8px;
  resize: none;
  -webkit-appearance: none;
}

.mc-field--textarea {
  padding-top: 8px;
}

.mc-field--textarea textarea {
  min-height: 80px;
}

/* Aktiv-Zustand: leicht hervorheben */
.mc-field:focus-within {
  border-bottom-color: var(--dark);
}

.mc-field:focus-within label {
  color: var(--dark);
}

/* ── Submit Button ───────────────────────────────────────── */
/* Figma: 335×40px, dark fill, "Lass uns loslegen!", top 2779 */
.mc-submit {
  width: 335px;
  height: 40px;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  margin-top: 32px;
  transition: background 0.25s ease;
}

.mc-submit:hover {
  background: #333;
}

/* ── Mail Alternative ────────────────────────────────────── */
/* Figma: centered grey text, top 2843 */
.mc-mail-alt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--grey);
  text-align: center;
  line-height: 1.5;
  margin: 24px 0 0;
}

.mc-mail-alt a {
  color: var(--grey);
  text-decoration: underline;
  text-underline-offset: 2px;
}