/* =============================================================
   index.css  –  Record Express Homepage
   ============================================================= */

.content { width: 100%; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.section { padding: 0; width: 100%;}

/* .hide-mobile: visible by default, hidden at ≤600px (see media query) */

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
   position: relative;
   width: 100%;
   min-height: 760px;
   overflow: hidden;
   background: #111;
}
.hero-bg-image { position: absolute; inset: 0; z-index: 0; }
.hero-bg-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-overlay {
   position: absolute; inset: 0; z-index: 1;
   background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.60) 45%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.05) 100%);
}
.hero-inner {
   position: relative; z-index: 2;
   padding: 72px 32px 48px;
   margin-top: 74px;
   margin-left: 193px;
}
.hero-text { max-width: 500px; color: #fff; }
.hero-text h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.5px; color: white; }
.hero-subline { font-size: 1.4rem; line-height: 1.6; margin-bottom: 28px; color: rgba(255,255,255,0.88); }
.hero-cta { font-size: 1.1rem; padding: 14px 32px; font-weight: 600; }

/* Trust bar */
.trust-bar {
   position: absolute;
   z-index: 2;
   background: rgba(30, 30, 30, 0.82);
   color: white;
   backdrop-filter: blur(4px);
   bottom: 0;
   left: 15%;
   width: 70%;
}
.trust-bar-inner {
   margin: 0 auto;
   padding: 14px 32px;
   display: flex;
   align-items: center;
   gap: 40px;
   max-width: var(--container-max);
   justify-content: center;
   flex-wrap: wrap;
   text-align: center;
}
.trust-bar-item { color: rgba(255,255,255,0.90); font-size: 1.3rem; white-space: nowrap; }
.trust-bar-divider { color: rgba(255,255,255,0.30); user-select: none; }


/* ══════════════════════════════════════════════════════════════
   GIFT
   ══════════════════════════════════════════════════════════════ */
.gift.section { padding: 64px 0 0; background: #fff; overflow: hidden; }

.gift-left { float: left; width: 60%; }
.gift-right { float: left; width: 40%; text-align: center; }
.gift-clearfix::after { content: ''; display: table; clear: both; }

.gift-headline { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; color: var(--main-dark); line-height: 1.2; margin-bottom: 14px; }
.gift-intro { font-size: 1.15rem; color: var(--grey-700); line-height: 1.65; margin-bottom: 24px; }

.gift-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.gift-photo { aspect-ratio: 2.5/3; overflow: hidden; border-radius: var(--radius); }
.gift-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gift-subline { font-size: 1.15rem; color: var(--grey-700); line-height: 1.65; margin-bottom: 0; }

.gift-speaker { width: 90%; display: block; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════
   STEPS
   ══════════════════════════════════════════════════════════════ */
.steps.section { padding: 0; overflow: hidden; }
.steps-layout { overflow: hidden; }

.steps-vinyl-col { float: left; }
.steps-vinyl-img { height: 900px; display: block; }

.steps-content-col { float: left; padding-left: 50px; padding-top: 190px; max-width: 780px; }

.steps-list { width: 100%; position: relative; }

/* Continuous vertical line behind all bubbles */
.steps-list::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 257px;
   width: 2px;
   background: rgba(0,0,0,0.15);
   z-index: 0;
}

/* Each step: left col = title (right-aligned) + number below; right col = text */
.step-item {
   display: grid;
   grid-template-columns: 200px 64px 1fr;
   gap: 0 28px;
   margin-bottom: 60px;
   align-items: start;
}

.step-title-col {
   text-align: right;
   padding-top: 0;
}
.step-item h3 {
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--main-dark);
   line-height: 1.25;
   margin: 0;
}

.step-connector {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   position: relative;
   z-index: 1;
}
.step-number {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--contrast);
   color: #fff;
   font-weight: 700;
   font-size: 1.7rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   margin-top: -8px;
}

.step-line { display: none; }

.step-body { padding-bottom: 40px; }
.step-item.last .step-body { padding-bottom: 0; }
.step-body p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 10px; }
.step-body ul { list-style: disc; padding-left: 18px; }
.step-body ul li { font-size: 1.1rem; line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════
   ARGUMENTS
   ══════════════════════════════════════════════════════════════ */

.emo-img.section img{
   float: left; 
   width: 100% 
}

.arguments.section { 
   background: #111; padding: 100px 0; position: relative; overflow: hidden; 
}
.arguments .container { position: relative; z-index: 1; }
.args-title { font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 700; color: var(--contrast); margin-bottom: 40px; }
.args-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 500px; }
.arg-card { display: flex; gap: 20px; align-items: stretch; }
.arg-icon { width: 4px; flex-shrink: 0; background: var(--main); border-radius: 2px; }
.arg-icon svg { display: none; }
.arg-text h3 { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.arg-text p { font-size: 1.1rem; color: var(--grey-400); line-height: 1.65; }

.args-bg-image { 
   position: absolute; 
   z-index: 0; 
   top: 0px;
   width: 100%;
}

.args-bg-image img { width: 100%; display: block; }
.args-bg-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #111 0%, rgba(17,17,17,0) 35%); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
   .hero-inner { padding: 56px 24px 40px; margin-left: 0; }
   .hero-text { max-width: 100%; }

   .trust-bar { left: 0; right: 0; transform: none; width: 100%; }

   /* Gift: stack vertically */
   .gift-left { float: none; width: 100%; }
   .gift-right { display: none; }

   /* Steps: hide vinyl, full width content */
   .steps-vinyl-col { display: none; }
   .steps-content-col { float: none; width: 100%; padding: 48px 24px; }

   /* Args: single column */
   .args-grid { grid-template-columns: 1fr; gap: 28px; }

   .args-bg-image{ display: none; }
}

@media (max-width: 900px) {
   .section { padding: 48px 0; }
   .container { padding: 0 20px; }
   .hide-mobile { display: none; }
   .trust-bar { display: none; }

   .hero { min-height: 480px; }
   .hero-inner { padding: 40px 20px 32px; margin-top: 0; }

   /* Gift photos: nur letztes Bild zeigen, mobil zu lang */
   .gift-photos { grid-template-columns: 1fr; }
   .gift-photo:nth-child(1),
   .gift-photo:nth-child(2) { display: none; }

   .steps-content-col { padding: 36px 20px; }
   .steps-list::before { left: 32px; }
   .step-item {
      grid-template-columns: 64px 1fr;
      grid-template-areas:
         ". title"
         "connector body";
   }
   .step-title-col { grid-area: title; text-align: left; padding-bottom: 4px; }
   .step-connector { grid-area: connector; }
   .step-body { grid-area: body; }

   .cta-banner-btn { width: 100%; max-width: 320px; }

   .hero-cta {
      display: block;
      width: fit-content;
      margin: var(--space-md) auto;
      font-size: 1.35rem;
      padding: 18px 42px;
   }

   .args-bg-image{ display: none; }
}