/* ==========================================================================
   LEISTUNGSSEITEN — die Stilvorlage, die es nie gab.

   Die dreizehn Detailseiten unter /pages/services/ tragen seit jeher die
   Klassen `svc-detail-*`, `svc-related*`, `service-icon` und `cta-banner`.
   Geschrieben wurde dafuer nie eine einzige Regel. Nachgemessen am
   26.08.2026 auf strategieberatung.html, 1280 px:

     .svc-detail-grid   → display: block   (das Raster war nie eines)
     .svc-detail-icon svg → 1176 x 1176 px (ein Zierpiktogramm in Plakatgroesse)
     Seitenhoehe        → 9828 px fuer rund 160 Woerter Text

   Das sind die dreizehn kommerziellen Einstiegspunkte der Domain. Jeder Klick
   aus Suche oder Antwortmaschine landet hier.

   Bewusst KEINE neue Gestaltung: diese Datei erfindet nichts, sie wendet nur
   das an, was premium.css bereits definiert — Farbtoken, Playfair fuer
   Ueberschriften, Inter fuer Text, die vorhandenen Radien und Schatten. Das
   FAQ-Element, `.result-list`, `.service-card` und die Buttons existieren
   ebenfalls schon und werden hier wiederverwendet, nicht nachgebaut.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Detailblock: Text links, Nutzen rechts.
   -------------------------------------------------------------------------- */

.svc-detail-section {
  padding: clamp(56px, 8vw, var(--section-py)) 0;
  background: var(--bg-page);
}

.svc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.svc-detail-content > p {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-body);
  max-width: 62ch;          /* Zeilenlaenge, nicht Spaltenbreite, bestimmt Lesbarkeit */
}

.svc-detail-content > p + p { margin-top: 1.25em; }

/* Das Piktogramm ist Zierrat und wird wie Zierrat behandelt. Ohne feste
   Groesse skaliert ein SVG ohne width/height auf die volle Spaltenbreite —
   genau das waren die 1176 px. */
.svc-detail-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--gold-pale), var(--bg-white));
  border: 1px solid var(--gold-border);
  box-shadow: var(--shadow-sm);
  color: var(--gold-dark);
}

.svc-detail-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* --------------------------------------------------------------------------
   Nutzenliste
   -------------------------------------------------------------------------- */

.svc-detail-benefits {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.svc-detail-benefits > h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  color: var(--text-h);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.svc-detail-benefit {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.svc-detail-benefit:first-of-type { border-top: 0; padding-top: 0; }

.svc-detail-benefit-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-dark);
}

.svc-detail-benefit-num svg { width: 15px; height: 15px; display: block; }

.svc-detail-benefit h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-h);
  margin-bottom: 4px;
}

.svc-detail-benefit p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Langtext: Definition, Eignung, Ablauf, Fragen.
   Eine einspaltige Lesespalte — hier wird gelesen, nicht gescannt.
   -------------------------------------------------------------------------- */

.svc-longform {
  padding: clamp(56px, 8vw, var(--section-py)) 0;
  background: var(--bg-section);
}

.svc-longform-inner {
  max-width: 780px;
  margin: 0 auto;
}

.svc-longform h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text-h);
  margin: 2.4em 0 0.7em;
}

.svc-longform h2:first-child { margin-top: 0; }

.svc-longform p,
.svc-longform li {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-body);
}

.svc-longform p + p { margin-top: 1.1em; }

/* Der Definitionsabsatz. Er steht zuerst, weil Antwortmaschinen den ersten
   zusammenhaengenden Absatz unter einer Ueberschrift als Antwort entnehmen. */
.svc-lead {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.2rem) !important;
  line-height: 1.65 !important;
  color: var(--text-h) !important;
  border-left: 3px solid var(--gold);
  padding-left: clamp(16px, 2.4vw, 24px);
}

/* Passt / passt nicht. Zwei Spalten auf Breite, gestapelt auf dem Handy. */
.svc-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 1.4em;
}

.svc-fit-col {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.6vw, 28px);
}

.svc-fit-col h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.svc-fit-col--yes { border-top: 3px solid var(--gold); }
.svc-fit-col--yes h3 { color: var(--gold-dark); }
.svc-fit-col--no  { border-top: 3px solid var(--border-strong); }
.svc-fit-col--no  h3 { color: var(--text-muted); }

.svc-fit-col ul { list-style: none; display: grid; gap: 11px; }

.svc-fit-col li {
  position: relative;
  padding-left: 24px;
  font-size: 0.96rem;
  line-height: 1.6;
}

.svc-fit-col--yes li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold-dark);
  border-bottom: 2px solid var(--gold-dark);
  transform: rotate(-45deg);
}

.svc-fit-col--no li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.72em;
  width: 10px; height: 2px;
  background: var(--text-muted);
}

.svc-fit-col--no li { color: var(--text-muted); }

/* Ablauf */
.svc-steps { list-style: none; counter-reset: s; display: grid; gap: 18px; margin-top: 1.3em; }

.svc-steps li {
  counter-increment: s;
  position: relative;
  padding-left: 52px;
  min-height: 34px;
}

.svc-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: -2px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-dark);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
}

.svc-steps strong { color: var(--text-h); font-weight: 650; }

/* Das FAQ-Element stammt aus premium.css und wird unveraendert genutzt;
   hier bekommt nur die Gruppe ihren Abstand. */
.svc-longform .faq-list { margin-top: 1.3em; }

/* --------------------------------------------------------------------------
   Verwandte Leistungen
   -------------------------------------------------------------------------- */

.svc-related {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--bg-page);
}

.svc-related > .container > h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  color: var(--text-h);
  margin-bottom: 28px;
}

.svc-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}

/* `.service-card` bringt Rahmen, Radius und Hover schon mit; das Piktogramm
   darin war die zweite Stelle ohne Groesse. */
.service-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  color: var(--gold-dark);
  margin-bottom: 16px;
}

.service-icon svg { width: 22px; height: 22px; display: block; }

/* --------------------------------------------------------------------------
   Abschluss-Banner
   -------------------------------------------------------------------------- */

.cta-banner {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-dark);
  text-align: center;
  overflow: hidden;
}

/* Ein einzelnes warmes Licht oben mittig — dieselbe Lichtsetzung wie auf der
   Startseite, damit die Unterseite nicht aus einer anderen Tageszeit stammt. */
.cta-banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(233,203,161,0.20), transparent 62%),
    radial-gradient(90% 60% at 50% 115%, rgba(233,203,161,0.09), transparent 70%);
  pointer-events: none;
}

.cta-banner h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  max-width: 20ch;
  margin: 0 auto 16px;
}

.cta-banner p {
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.76);
  max-width: 56ch;
  margin: 0 auto 32px;
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .svc-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-detail-benefits { position: static; }
}

@media (max-width: 560px) {
  /* Die Ueberschrift der Kopfzone ist auf diesen Seiten lang genug, um bei
     380 px seitlich auszubrechen (nachgemessen: „Strategieberatung",
     „Prozessoptimierung", „Mitarbeiterfuehrung"). Umbruch erlauben statt die
     Seite waagerecht scrollen zu lassen. */
  .page-hero h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }
}