/* ============================================================
   JOLIE WEBDESIGN — Eigenentwicklungen (Case Study)
   Seitenspezifische Komponenten: Handy-Rahmen, Vergleich,
   Conversion-Treppe, Selbsterkennung, Feature-Nutzen.
   Eigener Akzent (Indigo --c-accent-2), um die Rubrik
   "Eigenentwicklungen" visuell vom orangen Webdesign-Brand
   abzuheben.
   ============================================================ */

/* ── Rubrik-Akzent / Eyebrow ───────────────────────────────── */
.label--ew {
  color: var(--c-accent-2);
  background: rgba(var(--c-accent-2-rgb), 0.12);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Anker-Ziele: nicht unter der fixen Navigation verstecken ── */
#main, #showcase, #kontakt, #formular { scroll-margin-top: 88px; }

/* ── Hero ──────────────────────────────────────────────────── */
.ew-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-16);
  align-items: center;
}
.ew-hero__phone { display: flex; justify-content: center; }
.ew-price-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  color: var(--c-text-light);
  background: rgba(255, 255, 255, 0.03);
}
.ew-price-pill strong { color: var(--c-white); font-weight: var(--weight-semi); }

/* ── Handy-Rahmen (CSS-Device, kein Bild) ──────────────────── */
.device {
  position: relative;
  width: 270px;
  background: #0b0b14;
  border-radius: 38px;
  padding: 12px;
  box-shadow: var(--shadow-xl), 0 0 0 2px rgba(255,255,255,0.04) inset;
  flex: 0 0 auto;
}
.device::before { /* Notch */
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 22px;
  background: #0b0b14;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.device__screen {
  position: relative;
  width: 246px;
  height: 540px;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
}
/* Der iframe rendert mit echter Handybreite (360px), damit die App ihr
   normales Layout zeigt, und wird per transform auf die Rahmenbreite
   herunterskaliert. 360 x 0.684 = 246, 790 x 0.684 = 540. */
.device__screen iframe {
  width: 360px;
  height: 790px;
  border: 0;
  display: block;
  transform: scale(0.684);
  transform-origin: top left;
  /* Reine Anzeige: faengt kein Scrollrad ab und verhindert Fehlklicks. */
  pointer-events: none;
}

/* ── Screenshot-Showcase (Scroll-Snap auf Mobile, Grid auf Desktop) */
.ew-showcase {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--sp-4) var(--sp-1) var(--sp-8);
  margin: 0 calc(var(--sp-4) * -1);
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ew-showcase::-webkit-scrollbar { display: none; }
.ew-shot { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.ew-shot__caption { text-align: center; max-width: 270px; }
.ew-shot__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--c-accent-2);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-2);
}
.ew-shot__title { font-weight: var(--weight-bold); color: var(--c-white); font-size: var(--text-lg); margin-bottom: var(--sp-1); }
.ew-shot__text { color: var(--c-text-subtle); font-size: var(--text-sm); line-height: var(--leading-normal); }
.ew-disclaimer {
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--c-text-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: var(--max-w-narrow);
}
.ew-disclaimer svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-accent-2); }

/* ── Selbsterkennung ("Das ist deine Seite, wenn") ─────────── */
.ew-checklist { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.ew-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-lg);
  color: var(--c-text);
}
.ew-check__icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: rgba(var(--c-accent-2-rgb), 0.12);
  color: var(--c-accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Vergleichstabelle (Standard vs. Maßgeschneidert) ──────── */
.ew-vergleich {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--sp-10);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ew-vergleich th,
.ew-vergleich td { padding: var(--sp-5) var(--sp-6); text-align: left; border-bottom: 1px solid var(--c-border); font-size: var(--text-base); vertical-align: top; }
.ew-vergleich thead th { background: var(--c-light); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.ew-vergleich thead th.ew-vergleich__own { background: var(--c-accent-2); color: #fff; }
.ew-vergleich tbody tr:last-child th,
.ew-vergleich tbody tr:last-child td { border-bottom: 0; }
.ew-vergleich th[scope="row"] { font-weight: var(--weight-semi); color: var(--c-text); width: 30%; }
.ew-vergleich .ew-vergleich__std { color: var(--c-text-muted); }
.ew-vergleich .ew-vergleich__own { background: rgba(var(--c-accent-2-rgb), 0.05); color: var(--c-text); font-weight: var(--weight-medium); }
.ew-vergleich .ew-vergleich__own svg { color: var(--c-accent-2); vertical-align: -3px; margin-right: var(--sp-2); }
@media (max-width: 760px) {
  .ew-vergleich, .ew-vergleich thead, .ew-vergleich tbody, .ew-vergleich th, .ew-vergleich td, .ew-vergleich tr { display: block; }
  .ew-vergleich thead { display: none; }
  .ew-vergleich tbody tr { border-bottom: 8px solid var(--c-light); }
  .ew-vergleich th[scope="row"] { width: auto; background: var(--c-light); font-size: var(--text-base); }
  .ew-vergleich td::before { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-subtle); margin-bottom: var(--sp-1); }
  .ew-vergleich td.ew-vergleich__std::before { content: "Von der Stange"; }
  .ew-vergleich td.ew-vergleich__own::before { content: "Maßgeschneidert von Jolie"; color: var(--c-accent-2); }
}

/* ── Feature-Nutzen-Tabelle ────────────────────────────────── */
.ew-features { display: grid; gap: var(--sp-1); margin-top: var(--sp-8); }
.ew-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-dark-2);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-md);
  align-items: center;
}
.ew-feature__nutzen { color: var(--c-white); font-weight: var(--weight-semi); font-size: var(--text-lg); display: flex; gap: var(--sp-3); align-items: flex-start; }
.ew-feature__nutzen svg { flex: 0 0 auto; color: var(--c-accent-2); margin-top: 3px; }
.ew-feature__tech { color: var(--c-text-subtle); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* ── Ablauf in 4 Schritten ─────────────────────────────────── */
.ew-ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); counter-reset: step; }
.ew-step { position: relative; padding-top: var(--sp-10); }
.ew-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--c-accent-2);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-blue);
}
.ew-step h4 { color: var(--c-white); font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.ew-step p { color: var(--c-text-subtle); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* ── Trust / Sicherheit ────────────────────────────────────── */
.ew-trust { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-12); align-items: center; }
.ew-trust__list { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.ew-trust__item { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--c-text-light); font-size: var(--text-base); }
.ew-trust__item svg { flex: 0 0 auto; color: var(--c-accent-2); margin-top: 3px; }

/* ── Preis-Anker ───────────────────────────────────────────── */
.ew-preis {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-10);
  text-align: center;
  max-width: var(--max-w-narrow);
  margin: 0 auto var(--sp-12);
  box-shadow: var(--shadow-md);
}
.ew-preis .ew-preis__value { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--c-text); font-weight: var(--weight-bold); margin: var(--sp-3) 0; }
.ew-preis .ew-preis__value span { color: var(--c-accent-2); }
.ew-preis .ew-preis__note { color: var(--c-text-muted); font-size: var(--text-sm); }

/* ── Conversion-Treppe ─────────────────────────────────────── */
.ew-treppe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin: var(--sp-10) 0; }
.ew-treppe__step {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.ew-treppe__num { color: var(--c-accent-2); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase; }
.ew-treppe__step h4 { margin: var(--sp-2) 0; font-size: var(--text-lg); }
.ew-treppe__step p { color: var(--c-text-muted); font-size: var(--text-sm); margin: 0; }

/* ── Kontaktbox auf der Case Study ─────────────────────────── */
.ew-form-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-10);
  box-shadow: var(--shadow-lg);
  max-width: var(--max-w-narrow);
  margin: 0 auto;
}
.ew-form-card h3 { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.ew-form-card__sub { color: var(--c-text-muted); margin-bottom: var(--sp-6); }

/* ── Cross-Link Partnerschaft ──────────────────────────────── */
.ew-crosslink {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-8);
  color: var(--c-text-subtle);
  font-size: var(--text-sm);
}
.ew-crosslink a { color: var(--c-accent-2); font-weight: var(--weight-semi); }

/* ── Johanns Story ausklappbar ─────────────────────────────── */
.ew-story { margin-top: var(--sp-8); border: 1px solid var(--c-border-dark); border-radius: var(--r-md); background: var(--c-dark-2); }
.ew-story summary {
  cursor: pointer;
  padding: var(--sp-5) var(--sp-6);
  font-weight: var(--weight-semi);
  color: var(--c-white);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ew-story summary::-webkit-details-marker { display: none; }
.ew-story summary::after { content: "+"; color: var(--c-accent-2); font-size: var(--text-2xl); line-height: 1; }
.ew-story[open] summary::after { content: "\2212"; }
.ew-story__body { padding: 0 var(--sp-6) var(--sp-6); color: var(--c-text-subtle); line-height: var(--leading-normal); }
.ew-story__body p { margin-bottom: var(--sp-4); }

/* ── Kundenzitat (Testimonial, editoriales Split-Layout) ───── */
.ew-quote-band { background: linear-gradient(135deg, #ECEDFB 0%, #F6F7FE 100%); }

/* Karten-Container: großes Hochformat-Foto links, Zitat rechts */
.ew-quote {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  align-items: stretch;
  background: var(--c-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
}

/* Foto-Spalte: großflächig, Gesicht sauber positioniert */
.ew-quote__media {
  position: relative;
  min-height: 100%;
  background: linear-gradient(135deg, #ECEDFB 0%, #F6F7FE 100%);
}
.ew-quote__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 30%;
}
/* Dezenter Indigo-Verlauf an der Kante zum Text, für weichen Übergang */
.ew-quote__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0) 75%, rgba(79, 70, 229, 0.06) 100%);
  pointer-events: none;
}

/* Text-Spalte: garantiert lesbare helle Fläche (WCAG AA) */
.ew-quote__body {
  padding: var(--sp-10) var(--sp-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ew-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 0.6;
  color: var(--c-accent-2);
  margin-bottom: var(--sp-5);
}
.ew-quote__text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--c-text);
  font-weight: var(--weight-medium);
  margin: 0;
}
.ew-quote__author {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.ew-quote__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--c-text);
}
.ew-quote__role { display: block; color: var(--c-text-muted); font-size: var(--text-sm); margin-top: 2px; }
.ew-quote__role a { color: var(--c-accent-2); font-weight: var(--weight-semi); text-decoration: none; }
.ew-quote__role a:hover { text-decoration: underline; }
.ew-quote__role a:focus-visible,
.ew-quote__hire a:focus-visible {
  outline: 2px solid var(--c-accent-2);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.ew-quote__hire {
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: var(--leading-normal);
}
.ew-quote__hire a {
  color: var(--c-accent-2);
  font-weight: var(--weight-semi);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.ew-quote__hire a:hover { text-decoration: underline; }

/* Tablet: Foto-Spalte etwas schmaler halten */
@media (max-width: 768px) {
  .ew-quote { grid-template-columns: 38% 1fr; }
  .ew-quote__body { padding: var(--sp-8); }
}

/* Mobile: stapeln, Foto bleibt groß und prominent oben */
@media (max-width: 540px) {
  .ew-quote { grid-template-columns: 1fr; max-width: 460px; }
  .ew-quote__media { aspect-ratio: 4 / 3; min-height: 0; }
  .ew-quote__body { padding: var(--sp-8) var(--sp-6); }
  .ew-quote__mark { font-size: 3.5rem; margin-bottom: var(--sp-4); }
  .ew-quote__text { font-size: var(--text-xl); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ew-hero__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .ew-hero__phone { order: -1; }
  .ew-trust { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ew-ablauf { grid-template-columns: repeat(2, 1fr); }
  .ew-treppe { grid-template-columns: 1fr; }
  .ew-feature { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (max-width: 540px) {
  .ew-ablauf { grid-template-columns: 1fr; }
}