/* Sales-Landingpage: ruhige Praezision
   Farben und Schriftfamilien kommen ausschliesslich aus den bestehenden
   Design-Tokens der client_config.json. */

.page-sales #main > .inner {
  max-width: 76rem;
}

.sales-page {
  --sales-section-gap: clamp(5rem, 9vw, 8rem);
  font-family: var(--font-body);
  font-weight: 400;
}

.sales-page *,
.sales-page *::before,
.sales-page *::after {
  box-sizing: border-box;
}

.sales-hero,
.sales-section {
  scroll-margin-top: calc(var(--header-h, 5rem) + 1.5rem);
}

.sales-hero {
  margin-bottom: var(--sales-section-gap);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  background: var(--color-footer-bg);
  border-left: 0.3rem solid var(--color-accent);
  border-radius: 0 var(--radius-media) var(--radius-media) 0;
}

.sales-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.sales-kicker {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sales-hero h1 {
  max-width: 15ch;
  margin: 0 0 1.35rem;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: none;
}

.sales-lead {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}

.sales-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.sales-page .button,
.sales-footer .button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  overflow: visible;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.sales-hero-showcase {
  min-width: 0;
  margin: 0;
}

.sales-showcase-stage {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 2.25rem 4.5rem 0;
}

.sales-showcase-stage img {
  display: block;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
  background: var(--color-footer-bg);
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-media);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--color-heading) 16%, transparent);
}

.sales-showcase-main {
  width: 84%;
}

.sales-showcase-secondary {
  position: absolute;
  width: 47%;
}

/* Positionsklassen, bewusst NICHT nach Projekten benannt: Welches Projekt in
   welchem Slot liegt, entscheidet das Template. Sonst luegen die Klassennamen,
   sobald die Reihenfolge einmal getauscht wird. */
.sales-showcase-top {
  z-index: 2;
  top: 0;
  right: 0;
}

.sales-showcase-bottom {
  z-index: 3;
  right: 1rem;
  bottom: 0;
}

.sales-hero-showcase figcaption {
  margin-top: 0.7rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sales-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.sales-proof {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
}

.sales-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.1rem;
}

.sales-proof strong,
.sales-feature strong,
.sales-trust-item strong {
  display: block;
  color: var(--color-heading);
  font-weight: 600;
}

.sales-proof span:last-child {
  line-height: 1.45;
}

.sales-section {
  margin-bottom: var(--sales-section-gap);
}

.sales-section-panel {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-footer-bg);
  border-radius: var(--radius-media);
}

.sales-intro {
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.sales-intro .section-heading,
.sales-final-cta .section-heading {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-transform: none;
}

.sales-intro .section-paragraph {
  max-width: 62ch;
  margin: 1rem 0 0;
  line-height: 1.7;
}

.sales-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.sales-ref {
  min-width: 0;
}

.sales-ref-image-link {
  display: block;
  border-bottom: 0;
}

.sales-ref img {
  display: block;
  width: 100%;
  height: auto;   /* siehe Hinweis beim Hero-Portrait */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  /* Die breite Oberkante ist eine angedeutete Browserleiste: Sie laesst den
     Screenshot als Fenster lesen, dadurch wirkt der Anschnitt unten wie das
     normale Ende eines Fensters und nicht wie ein abgeschnittenes Bild.
     Bewusst nur hier -- im Hero wuerden die gestaffelten Karten dadurch
     unruhig. Absichtlich neutral statt im Akzentton: Rostbraun bleibt der
     Handlungsfarbe fuer Buttons und das empfohlene Paket vorbehalten. */
  border: 1px solid var(--color-border);
  border-top: 1.35rem solid color-mix(in srgb, var(--color-heading) 9%, #fff);
  border-radius: var(--radius-media);
}

.sales-ref-body {
  padding: 1.15rem 0 0;
}

.sales-ref h3 {
  margin: 0 0 0.55rem;
  color: var(--color-heading);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: none;
}

.sales-ref p {
  margin: 0 0 0.75rem;
  line-height: 1.65;
}

.sales-ref-meta,
.sales-ref-status {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sales-ref a.sales-ref-meta {
  color: var(--color-accent);
}

.sales-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.sales-fit {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.sales-fit-primary {
  border-top: 0.25rem solid var(--color-accent);
}

.sales-fit-muted {
  background: var(--color-footer-bg);
  /* Gegenstueck zum Akzentstrich der Primaerkarte: gleiche Farbe und Staerke,
     aber unten -- die Karte ist die Abgrenzung, nicht das Angebot. */
  border-bottom: 0.25rem solid var(--color-accent);
}

.sales-fit h3 {
  margin: 0 0 1rem;
  color: var(--color-heading);
  font-size: 1.12rem;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.sales-fit ul {
  margin: 0;
  padding-left: 1.2rem;
}

.sales-fit li {
  margin-bottom: 0.65rem;
  line-height: 1.55;
}

.sales-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  /* "stretch" statt "start": Alle drei Karten bekommen die Hoehe der
     hoechsten. Zusammen mit dem "margin-top: auto" am Button unten stehen
     auch die Buttons auf einer Linie. */
  align-items: stretch;
}

.sales-package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.sales-package-featured {
  /* Kein translateY mehr: Der Versatz nach oben liess die Karte groesser
     wirken, obwohl alle drei exakt gleich hoch sind. Die Hervorhebung
     tragen jetzt allein der Akzentrahmen und das Badge. */
  border: 0.15rem solid var(--color-accent);
}

.sales-badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.7rem;
  color: var(--color-accent-text);
  background: var(--color-accent);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sales-package h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-transform: none;
}

.sales-price {
  margin: 0.7rem 0 0;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1.15;
}

.sales-package-sub {
  min-height: 3.3rem;
  margin: 0.65rem 0 1rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.sales-check-list {
  display: grid;
  gap: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.sales-check-list li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.58rem 0;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.5;
}

.sales-check-list .sales-icon {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0.22rem;
  font-size: 0.72rem;
}

.sales-package .button {
  width: 100%;
  /* Schiebt den Button ans untere Ende der Karte, egal wie viele
     Leistungspunkte darueber stehen -- so fluchten die drei CTAs. */
  margin-top: auto;
}

.sales-addons {
  max-width: 72rem;
  margin: 1.4rem 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.sales-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sales-feature {
  padding: 1.5rem;
  background: var(--color-surface);
  border-top: 0.2rem solid var(--color-accent);
  border-radius: 0 0 var(--radius) var(--radius);
}

.sales-feature .sales-icon {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.sales-feature p {
  margin: 0.45rem 0 0;
  line-height: 1.6;
}

.sales-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--color-footer-bg);
  border-left: 0.25rem solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.sales-trust-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.sales-trust-item .sales-icon {
  justify-content: flex-start;
}

.sales-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sales-step;
}

.sales-steps li {
  position: relative;
  padding: 1.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  counter-increment: sales-step;
}

.sales-steps li::before {
  content: "0" counter(sales-step);
  display: block;
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sales-steps h3 {
  margin: 0 0 0.55rem;
  color: var(--color-heading);
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
}

.sales-steps p {
  margin: 0;
  line-height: 1.6;
}

.sales-about-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* Text vertikal auf die Bildmitte ausrichten -- die Portraitspalte ist
     hoeher als der Textblock, "start" liess den Text oben kleben. */
  align-items: center;
}

.sales-about-portrait {
  max-width: 22rem;
  margin: 0;
}

.sales-about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--radius-media);
}

.sales-about-portrait figcaption {
  margin-top: 0.7rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sales-about-content {
  display: grid;
  gap: 1.5rem;
}

/* Nur im zweispaltigen Layout: Der Text soll auf der Mitte des BILDES stehen,
   nicht auf der Mitte der Spalte. Die Bildunterschrift gehoert zur Spalte und
   zieht deren Mitte sonst nach unten. Die Marge entspricht der Unterschrift
   (zwei Zeilen) plus ihrem Abstand; bei zentrierter Ausrichtung wirkt davon
   die Haelfte als Gegenversatz. */
@media screen and (min-width: 981px) {
  .sales-about-content {
    margin-bottom: calc(2 * 0.85rem * 1.5 + 0.7rem);
  }
}

.sales-about-copy {
  max-width: 65ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
}

.sales-about-points {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-about-points li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  line-height: 1.55;
}

.sales-faq {
  max-width: 52rem;
}

.sales-faq details {
  border-bottom: 1px solid var(--color-border);
}

.sales-faq summary {
  min-height: 3.25rem;
  padding: 1rem 2.5rem 1rem 0;
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}

.sales-faq details[open] summary {
  color: var(--color-accent);
}

.sales-faq details p {
  max-width: 68ch;
  margin: 0;
  padding: 0 2.5rem 1.2rem 0;
  line-height: 1.7;
}

.sales-final-cta {
  padding: clamp(2rem, 6vw, 4.5rem);
  color: var(--color-accent-text);
  background: var(--color-heading);
  border-radius: var(--radius-media);
  text-align: center;
}

.sales-final-cta .section-heading {
  max-width: 20ch;
  margin-right: auto;
  margin-left: auto;
  color: var(--color-accent-text);
}

.sales-final-cta .section-paragraph {
  max-width: 58ch;
  margin: 1.2rem auto 0;
  color: var(--color-accent-text);
  line-height: 1.7;
}

.sales-final-cta .button.primary {
  margin-top: 1.75rem;
  background: var(--color-accent) !important;
}

.sales-final-note {
  margin: 1rem 0 0;
  color: var(--color-accent-text);
  font-size: 0.9rem;
}

.sales-final-note a {
  color: inherit;
}

.sales-footer .inner {
  display: block;
}

.sales-footer-intro {
  max-width: 44rem;
}

.sales-footer-intro strong {
  display: block;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
}

.sales-footer-intro p {
  max-width: 54ch;
  margin: 0.7rem 0 0;
  line-height: 1.65;
}

.sales-footer-intro a {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
}

.page-sales .sales-nav-cta {
  display: none;
}

.page-sales #header .header-cta {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  font-size: 0.72rem;
}

.page-sales #header .nav-toggle {
  width: 2.75rem;
  height: 2.75rem;
}

.page-sales a:focus-visible,
.page-sales button:focus-visible,
.sales-footer a:focus-visible,
.sales-faq summary:focus-visible {
  outline: 0.18rem solid var(--color-hover);
  outline-offset: 0.2rem;
}

@media screen and (max-width: 980px) {
  .sales-hero-grid,
  .sales-about-grid {
    grid-template-columns: 1fr;
  }

  .sales-hero h1 {
    max-width: 18ch;
  }

  .sales-hero-showcase {
    max-width: 44rem;
  }

  .sales-ref-grid,
  .sales-package-grid {
    grid-template-columns: 1fr;
  }

  .sales-package-featured {
    order: -1;
  }

  .sales-package-sub {
    min-height: 0;
  }

  .sales-feature-grid,
  .sales-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 820px) {
  .page-sales #header .main-nav a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
  }

  .page-sales #header .sales-nav-cta {
    display: list-item;
  }

  .page-sales #header .sales-nav-cta a {
    color: var(--color-accent) !important;
  }
}

@media screen and (max-width: 736px) {
  .sales-page {
    --sales-section-gap: 4.5rem;
  }

  .sales-hero {
    padding: 1.35rem;
  }

  .sales-showcase-stage {
    padding: 0.75rem 1rem 3.25rem 0;
  }

  .sales-showcase-main {
    width: 88%;
  }

  .sales-showcase-secondary {
    width: 48%;
  }

  .sales-showcase-bottom {
    right: 0.25rem;
  }

  .sales-hero h1 {
    max-width: none;
    font-size: clamp(2.25rem, 10.5vw, 2.75rem);
    line-height: 1.08;
  }

  .sales-lead {
    font-size: 1.05rem;
    line-height: 1.62;
  }

  .sales-actions {
    display: grid;
  }

  .sales-actions li,
  .sales-actions .button {
    width: 100%;
  }

  .sales-proof-grid,
  .sales-fit-grid,
  .sales-feature-grid,
  .sales-trust-grid,
  .sales-steps {
    grid-template-columns: 1fr;
  }

  .sales-proof {
    min-height: 4.5rem;
  }

  .sales-section-panel {
    padding: 1.35rem;
  }

  .sales-ref-grid {
    gap: 2.5rem;
  }

  .sales-final-cta {
    text-align: left;
  }

  .sales-final-cta .section-heading,
  .sales-final-cta .section-paragraph {
    margin-left: 0;
  }

  .sales-final-cta .button {
    width: 100%;
  }
}

/* =========================================================
   Ergaenzungen bei der Umsetzung im Hauptprojekt
   ---------------------------------------------------------
   1) main.css setzt .section-heading auf "padding: 0 1em" -> die H2 standen
      dadurch rund 35px gegen Kicker und Fliesstext versetzt.
   2) main.css laesst h3 auf font-weight 400 -> die Kartenueberschriften waren
      so leicht wie ihr eigener Fliesstext, teilweise sogar kleiner.
   3) Fuer .sales-feature h3 fehlte eine Regel, es griff der main.css-Default.
   4) main.css setzt h2-h6 auf "opacity: .8" -> Ueberschriften wirkten
      ausgewaschen, auf der dunklen Abschlussflaeche besonders deutlich.
   ========================================================= */

.sales-page h2,
.sales-page h3,
.sales-page h4,
.sales-footer h2,
.sales-footer h3 {
  opacity: 1;
}

.sales-intro .section-heading,
.sales-final-cta .section-heading {
  padding: 0;
}

.sales-ref h3,
.sales-fit h3,
.sales-package h3,
.sales-steps h3,
.sales-feature h3,
.sales-footer-intro strong {
  font-weight: 600;
}

.sales-feature h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
}

/* base.html setzt fuer layout-service unter 736px "min-height: 3.5em" auf .button.
   Das rechnet auf die kleine Button-Schrift und ergibt nur 43,7px -- Touch-Ziele
   sollen aber mindestens 44px hoch sein. Darum hier ein fester Boden in rem. */
@media screen and (max-width: 736px) {
  body.page-sales .sales-page .button,
  body.page-sales .sales-footer .button {
    min-height: 3rem;
  }
}

/* =========================================================
   Warmes Studio
   Seitenspezifische Auspraegung der zentralen Design-Tokens.
   Andere Framework-Seiten behalten ihr konfiguriertes Theme.
   ========================================================= */

body.page-sales {
  --color-text: #34423d;
  --color-heading: #25342e;
  --color-bg: #faf7f2;
  --color-accent: #375a4a;
  --color-accent-text: #ffffff;
  --color-hover: #294739;
  --color-muted: #68736e;
  --color-surface: #fffdf9;
  --color-border: #dcd6cc;
  --color-footer-bg: #e8ded0;
  --radius: 6px;
  --radius-media: 10px;
  background: var(--color-bg);
}

.page-sales #header {
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-heading) 10%, transparent);
}

.page-sales #main > .inner {
  max-width: 84rem;
}

.sales-page {
  --sales-section-gap: clamp(6rem, 10vw, 10rem);
}

.sales-page .button,
.sales-footer .button {
  border-radius: var(--radius);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.sales-hero {
  margin-bottom: clamp(5rem, 8vw, 8rem);
  padding: clamp(3rem, 5vw, 4.5rem) 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.sales-hero-grid {
  grid-template-columns: minmax(25rem, 0.88fr) minmax(32rem, 1.12fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.sales-hero h1 {
  max-width: 13ch;
  margin-bottom: 1.6rem;
  font-size: clamp(2.8rem, 4.1vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.sales-lead {
  max-width: 47ch;
  font-size: clamp(1.16rem, 1.6vw, 1.35rem);
  line-height: 1.6;
}

.sales-actions {
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.2rem;
}

/* main.css gibt jedem "ul li" padding-left: 0.5em -> Button stand 9px
   rechts neben der Textkante. */
.sales-actions li {
  padding-left: 0;
}

/* Primaeraktion: groesser als der Textlink daneben (Hierarchie). */
.sales-actions .button.primary {
  min-height: 3.4rem;
  padding: 0.85rem 1.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Sekundaerlink: bewusst kleiner und leichter als der Button. */
.sales-text-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Header-CTA: war 12px in Versalien -- jetzt lesbar, passend zum Hero-Button.
   body-Praefix noetig: "#header.hv-split .header-cta" in base.html hat dieselbe
   Spezifitaet und steht spaeter im Dokument. */
body.page-sales #header .header-cta {
  min-height: 2.75rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: var(--radius);
}

.sales-showcase-stage {
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  background: var(--color-footer-bg);
  border-radius: var(--radius-media);
}

.sales-showcase-stage img {
  border: 0;
  background: #ffffff;
  box-shadow: 0 1.5rem 3.5rem rgba(37, 52, 46, 0.13);
}

.sales-showcase-main {
  width: 100%;
}

/* Fotografische Szene (Laptop-Mockup): kein Sand-Rahmen und kein
   zweiter Schatten um ein Bild, das seine Umgebung schon mitbringt. */
.sales-showcase-stage.is-scene {
  padding: 0;
  background: transparent;
}

.sales-showcase-stage.is-scene img {
  box-shadow: 0 1.5rem 3.5rem rgba(37, 52, 46, 0.18);
  border-radius: var(--radius-media);
}

.sales-hero-showcase figcaption {
  margin-top: 0.9rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.sales-proof-grid {
  gap: 0;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding: 1.65rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sales-proof {
  min-height: 4rem;
  padding: 0 2rem;
  background: transparent;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
}

.sales-proof:first-child {
  padding-left: 0;
}

.sales-proof:last-child {
  padding-right: 0;
  border-right: 0;
}

.sales-kicker,
.sales-ref-client {
  color: var(--color-accent);
}

/* body.page-sales noetig: base.html setzt "body.layout-service .section-heading"
   (Spezifitaet 0,2,1) und hat die alte Regel ohne body-Praefix ueberstimmt.
   Skala Desktop: H1 ~68px > H2 44px > Projekt-H3 36px. */
body.page-sales .sales-intro .section-heading,
body.page-sales .sales-final-cta .section-heading {
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  letter-spacing: -0.025em;
}

.sales-ref-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4.5rem);
}

/* Hervorgehobene Karte: Text links, Bild rechts. Das Bild bekommt dieselbe
   Spaltenbreite wie die beiden Karten darunter (1fr/1fr, gleicher Spalten-
   abstand wie im Grid) -- vorher 1.28fr, dadurch deutlich groesser als Hero
   und Nachbarkarten. */
.sales-ref-featured {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.sales-ref-featured .sales-ref-image-link {
  grid-column: 2;
  grid-row: 1;
}

.sales-ref-featured .sales-ref-body {
  grid-column: 1;
  grid-row: 1;
  padding: 0;
}

/* Featured-H3 in derselben Groesse wie die H3 der Karten darunter
   (.sales-ref h3: 1.08rem) -- eine Hierarchiestufe fuer alle drei Referenzen. */
.sales-ref-featured h3 {
  max-width: 24ch;
}

/* Textgroesse bewusst NICHT eigens gesetzt: Featured-Absatz erbt dieselbe
   Groesse wie die Absaetze der beiden Karten darunter (.sales-ref p). */
.sales-ref-featured p:not(.sales-ref-client) {
  max-width: 42ch;
}

.sales-ref-client {
  margin-bottom: 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sales-ref img {
  border-color: color-mix(in srgb, var(--color-heading) 10%, transparent);
}

.sales-section-panel {
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--color-footer-bg);
}

.sales-fit-grid {
  gap: 0;
}

.sales-fit {
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) 0 0;
  background: transparent;
  border: 0;
}

.sales-fit + .sales-fit {
  padding-right: 0;
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 1px solid color-mix(in srgb, var(--color-heading) 18%, transparent);
}

.sales-package {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--color-surface);
  box-shadow: 0 1rem 3rem rgba(37, 52, 46, 0.045);
}

.sales-package-featured {
  background: #ffffff;
  box-shadow: 0 1.2rem 3.5rem rgba(37, 52, 46, 0.09);
}

.sales-badge {
  border-radius: var(--radius);
  letter-spacing: 0.055em;
  text-transform: none;
}

.sales-feature {
  padding: 1.5rem 1.5rem 1.5rem 0;
  background: transparent;
  border-top: 1px solid var(--color-accent);
  border-radius: 0;
}

.sales-trust-grid {
  padding: 2rem 0;
  background: transparent;
  border-left: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.sales-steps {
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sales-steps li {
  padding: 1.75rem 2rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-border);
}

.sales-steps li:first-child {
  padding-left: 0;
}

.sales-steps li:last-child {
  padding-right: 0;
  border-right: 0;
}

.sales-about-grid {
  align-items: center;
}

.sales-about-portrait img {
  box-shadow: 0 1.3rem 3rem rgba(37, 52, 46, 0.1);
}

.sales-final-cta {
  color: #ffffff;
  background: var(--color-accent);
}

.sales-final-cta .button.primary {
  color: var(--color-heading) !important;
  background: var(--color-bg) !important;
  box-shadow: none;
}

.sales-footer {
  background: var(--color-footer-bg) !important;
}

@media screen and (max-width: 980px) {
  .sales-hero-grid,
  .sales-ref-featured {
    grid-template-columns: 1fr;
  }

  .sales-ref-featured .sales-ref-image-link,
  .sales-ref-featured .sales-ref-body {
    grid-column: 1;
  }

  .sales-ref-featured .sales-ref-body {
    grid-row: 2;
  }

  .sales-ref-featured .sales-ref-image-link {
    grid-row: 1;
  }
}

@media screen and (max-width: 736px) {
  .sales-page {
    --sales-section-gap: 5.5rem;
  }

  .sales-hero {
    padding: 2.5rem 0 0;
  }

  .sales-hero h1 {
    font-size: clamp(2.35rem, 11.5vw, 3.4rem);
    line-height: 1.02;
  }

  .sales-actions {
    display: flex;
    align-items: stretch;
  }

  .sales-actions li,
  .sales-actions .button {
    width: auto;
  }

  .sales-actions .button {
    width: 100%;
  }

  .sales-showcase-stage {
    padding: 1rem;
  }

  .sales-proof-grid,
  .sales-ref-grid {
    grid-template-columns: 1fr;
  }

  .sales-proof {
    padding: 1.15rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .sales-proof:last-child {
    border-bottom: 0;
  }

  .sales-fit + .sales-fit {
    margin-top: 2rem;
    padding-top: 2rem;
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-heading) 18%, transparent);
    border-left: 0;
  }

  .sales-steps {
    border-bottom: 0;
  }

  .sales-steps li,
  .sales-steps li:first-child,
  .sales-steps li:last-child {
    padding: 1.5rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}