/* ==========================================================================
   Was wir machen · drei Ebenen (Strom: referenzen-leistungen) · Version D
   Nur Tokens und Bausteine aus base.css. Aktiv = .sel (kurzer roter Strich links, base.css).
   ========================================================================== */
/* ---------------- Was wir machen ----------------
   Ab 1100 px: links Kopf + Lead + Aufbau (sticky), rechts die drei Ebenen untereinander (Text, darunter der Beleg).
   Der Aufbau steht von unten nach oben (01 = breitestes Fundament unten, 02 und 03 je etwas schmaler, wie in A).
   Aktiv ist die Ebene, die gerade gelesen wird (js/leistungen.js setzt .is-active, Markierung = .sel aus base.css).
   Darunter: Kopf, Aufbau als ruhige Übersicht (ohne Sticky und ohne Aktiv-Zustand), dann die Ebenen. */
.svc__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.svc__side { margin-bottom: var(--head-gap); }
.svc__head { display: grid; gap: 1.1rem; max-width: 40rem; }
.svc__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 30em; text-wrap: pretty; }

.svc__rail { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); max-width: 30rem; }
.svc__stack { display: grid; gap: .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line-3); }
.svc__l--2 { margin-inline: 4%; }
.svc__l--3 { margin-inline: 8%; }
.svc__tier { --sel-r: var(--r-md); display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--ring); color: var(--text-2); }
.svc__no { font-size: var(--fs-small); font-weight: 650; color: var(--text-3); transition: color var(--t-mid) var(--ease); }
.svc__tt { display: grid; gap: .15rem; }
.svc__tt b { font-weight: 600; color: var(--text); line-height: 1.3; }
.svc__tt small { font-size: var(--fs-meta); line-height: 1.4; color: var(--text-3); }
.svc__tier.is-active .svc__no { color: var(--red-text); }
.svc__tier.is-active small { color: var(--text-2); }
.svc__note { margin-top: .9rem; }

.svc__list { display: grid; }
.svc__lvl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); border-top: 1px solid var(--line-2); scroll-margin-top: 1.5rem; }
.svc__lvl:first-child { padding-top: 0; border-top: 0; }
.svc__lvl:last-child { padding-bottom: 0; }

@media (min-width: 1100px) {
  .svc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: start; }
  .svc__side { position: sticky; top: 7.5rem; margin-bottom: 0; }
  .svc__lvl { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: clamp(3rem, 2rem + 2vw, 4.5rem); }
  .svc__txt > p:not(.svc__k):not(.svc__caps) { font-size: var(--fs-lead); line-height: 1.55; }
}
/* Feinschliff 15.10 (Marcel): der Strich ist nicht mehr an den Scrollweg gekoppelt. js/leistungen.js wählt die aktive Ebene
   (mit kleiner Hysterese an der Lesezeile) und setzt nur .is-active. Wechsel: der alte Strich geht kurz weg (120 ms), erst dann
   wächst der neue ruhig (280 ms). So ist nie mehr als ein Strich sichtbar, es bleibt kein Restwert stehen.
   Beim Laden steht der Strich ohne Animation ([data-init]). Hover zeigt hier keinen halben Strich (die Leiste ist sticky und liegt beim Scrollen oft unter dem Zeiger), nur die Fläche; Tastaturfokus behält ihn. */
@media (min-width: 1100px) {
  .svc__rail .svc__tier.sel { transition-duration: var(--t-slow), var(--t-slow), var(--t-slow), var(--t-fast); }
  .svc__rail .svc__no { transition-duration: var(--t-slow); }
  .svc__rail[data-clean] .svc__tier.sel::before { transition: transform 120ms ease-in; }
  .svc__rail[data-clean] .svc__tier.sel.is-active::before { transition: transform 280ms var(--ease) 120ms; }
  .svc__rail[data-clean] .svc__tier.sel:not(.is-active):hover::before { transform: translateY(-50%) scaleY(0); }
  .svc__rail[data-init] .svc__tier, .svc__rail[data-init] .svc__tier.sel::before, .svc__rail[data-init] .svc__no { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) { .svc__rail[data-clean] .svc__tier.sel::before, .svc__rail[data-clean] .svc__tier.sel.is-active::before { transition: none; } }
/* Laptop-Höhe: der Sticky-Teil muss ganz ins Bild passen */
@media (min-width: 1100px) and (max-height: 820px) {
  .svc__side { top: 6rem; }
  .svc__head { gap: .8rem; }
  .svc__rail { margin-top: 1.5rem; }
  .svc__tier { padding-block: .7rem; }
  .svc__note { display: none; }
}

.svc__k { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.svc__k b { font-weight: 650; color: var(--red-text); }
.svc__txt .h3 { margin-bottom: .9rem; }
.svc__txt > p:not(.svc__k):not(.svc__caps) { color: var(--text-2); max-width: 34em; text-wrap: pretty; }
.svc__caps { margin: 1.1rem 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text); font-weight: 560; }

/* Beleg: breiter Screenshot + Smartphone, das rechts unten über die Kante steht. Keine Browser-Rahmen. */
.svc__pair { position: relative; padding: 0 13% 7% 0; }
.svc__wide { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.svc__wide img { object-position: top; }
.svc__phone { display: block; position: absolute; right: 0; bottom: 0; width: 23%; aspect-ratio: 390 / 845; border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.svc__phone img { object-position: top; }
/* Ebene 01 (Ofen Ragginger): Ausschnitt 820 × 700, Smartphone links unten, damit der Claim rechts frei bleibt */
.svc__pair--rag { padding: 0 0 8% 11%; }
.svc__pair--rag .svc__wide { aspect-ratio: 16 / 10; }
.svc__pair--rag .svc__phone { right: auto; left: 0; width: 24%; }
a.media img { transition: transform var(--t-slow) var(--ease); }
a.media:hover img { transform: scale(1.015); }
.svc__vis { container-type: inline-size; }
.svc__src { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1rem; font-size: var(--fs-meta); color: var(--text-3); }
.svc__src a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--text-2); font-weight: 560; transition: color var(--t-fast); }
.svc__src a:hover { color: var(--text); }
.svc__src a > span[aria-hidden] { margin-left: .3em; color: var(--text-3); transition: color var(--t-fast), transform var(--t-mid) var(--ease); }
.svc__src a:hover > span[aria-hidden] { color: var(--red-text); transform: translate(2px, -2px); }

/* Coreflow System (Platzhalter mit Beispieldaten): Landingpage links oben, Plattform-Ansicht rechts unten davor */
.svc__pair--sys { display: grid; padding: 0; }
.svc__pair--sys > * { grid-area: 1 / 1; }
.svc__pair--sys .svc__wide { width: 66%; aspect-ratio: 1100 / 579; align-self: start; }
.sys { position: relative; z-index: 1; justify-self: end; align-self: end; width: 64%; margin-top: 16%; padding: .9rem; border-radius: var(--r-lg); background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-3); font-size: var(--fs-meta); }
.sys__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.sys__top img { width: 6rem; }
.sys__ex { font-size: .75rem; color: var(--text-3); }
.sys__h { font-weight: 650; font-size: var(--fs-small); margin-bottom: .5rem; }
.sys__lead { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .7rem .8rem; border-radius: var(--r-sm); background: var(--surface-4); margin-bottom: .35rem; }
.sys__lead b { min-width: 0; font-weight: 600; }
.sys__path, .sys__next { grid-column: 1 / -1; color: var(--text-2); font-size: .75rem; }
.sys__list li { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: .8rem; padding: .45rem .8rem; border-top: 1px solid var(--line); color: var(--text-2); }
.sys__list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; color: var(--text); }
.sys__list .sys__st, .sys__list span { white-space: nowrap; }
.sys__st { font-size: .75rem; color: var(--text-2); }
.sys__st--new { color: var(--red-text); font-weight: 650; display: inline-flex; align-items: center; gap: .35rem; }
@container (max-width: 560px) { .sys__list li { grid-template-columns: 1fr auto; } .sys__list li span:not(.sys__st) { display: none; } }
.sys__st--new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

@media (max-width: 699px) {
  .svc__lvl { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc__tier { padding: .75rem .9rem; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .6rem; }
  .svc__l--2 { margin-inline: 3%; } .svc__l--3 { margin-inline: 6%; }
  .svc__caps { margin-bottom: 1rem; }
  .svc__pair { padding: 0 11% 9% 0; }
  .svc__pair--rag { padding: 0 0 9% 12%; }
  .svc__pair--rag .svc__phone { width: 27%; }
  .svc__phone { width: 26%; border-radius: var(--r-sm); }
  .svc__pair--sys .svc__wide { width: 78%; }
  .sys { width: 82%; margin-top: 30%; padding: .8rem; }
  .sys__list li { grid-template-columns: 1fr auto; padding-inline: .6rem; }
  .sys__list li span:not(.sys__st) { display: none; }
  .sys__list li:nth-child(n+2) { display: none; }
}

@media (max-width: 479px) { .sys__list { display: none; } }