/* ==========================================================================
   kenmedia.tr — Neler yapıyoruz (process.css)
   9-Schritte-Prozess: Chevron-Band (Desktop/Tablet) + Akkordeon (alle Größen).
   Farbe je Schritt: von Tiefblau (1) zu Hellblau (9) = Wachstum.
   ========================================================================== */
.pr-step,.st{--c:color-mix(in oklab,#123B66,#4FA8EE calc((var(--i) - 1) * 12.5%))}

/* ---------- Band ---------- */
.pr-wrap{position:relative;padding-block:8px 72px;border-top:0}
@media (max-width:699px){.pr-wrap{display:none}}
.pr{display:none}
.pr a{text-decoration:none;color:#fff}
.pr-chev{position:relative;display:grid;place-items:center;height:120px;background:var(--c);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%);transition:transform .3s var(--ease),filter .3s}
.pr-chev svg{position:relative;z-index:1;width:46px;height:46px;color:#fff;stroke-width:1.5}
/* Lichtwelle läuft von Schritt 1 nach 9 */
.pr-chev::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
  transform:translateX(-120%);animation:pr-sweep 6s var(--ease) infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes pr-sweep{0%{transform:translateX(-120%)}25%,100%{transform:translateX(120%)}}
.pr a:hover .pr-chev,.pr a:focus-visible .pr-chev,.pr a[aria-current] .pr-chev{filter:brightness(1.15)}
.pr a:focus-visible{outline:none}
.pr a:focus-visible .pr-lbl{outline:3px solid var(--blue-lt);outline-offset:3px}
.pr-lbl{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--c);font-weight:700;font-size:.9375rem;white-space:nowrap;line-height:1.2}
.pr-lbl b{font-size:.75rem;opacity:.75;letter-spacing:.04em}
.pr-pause{position:absolute;right:var(--gutter);bottom:20px}

/* Tablet: 3 × 3, Label unter dem Chevron */
@media (min-width:700px){
  .pr{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 10px}
  .pr a{display:grid;justify-items:center;gap:14px}
  .pr-chev{width:100%}
}
/* Desktop: eine Reihe, Labels abwechselnd oben/unten mit gestrichelter Linie */
@media (min-width:1180px){
  .pr{display:flex;gap:0;padding-inline:4px}
  .pr-step{flex:1;min-width:0;margin-right:-14px}
  .pr-step:last-child{margin-right:0}
  .pr a{display:grid;grid-template-rows:84px 120px 84px;gap:0;justify-items:stretch}
  .pr-chev{grid-row:2;width:auto}
  .pr-lbl{position:relative;justify-self:center;align-self:start;font-size:.875rem;padding:9px 15px}
  .pr-up .pr-lbl{grid-row:1;align-self:start}
  .pr-down .pr-lbl{grid-row:3;align-self:end}
  .pr-lbl::after{content:"";position:absolute;left:50%;width:0;height:30px;border-left:2px dashed var(--c);opacity:.8}
  .pr-up .pr-lbl::after{top:100%}
  .pr-down .pr-lbl::after{bottom:100%}
  .pr a:hover .pr-chev{transform:translateY(-4px)}
}

/* ---------- Akkordeon ---------- */
.pr-steps{display:grid;gap:12px}
.st{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.st::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.st[open]{border-color:color-mix(in oklab,var(--c),transparent 40%);box-shadow:0 24px 50px -30px color-mix(in oklab,var(--c),transparent 20%)}
.st summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:20px 22px 20px 30px;min-height:88px}
.st summary::-webkit-details-marker{display:none}
.st summary:focus-visible{outline-offset:-4px}
.st-n{font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--c);min-width:1.4ch;font-variant-numeric:tabular-nums}
.st-h{display:grid;gap:2px}
.st-h b{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);letter-spacing:-.02em;line-height:1.2}
.st-h small{font-size:.9375rem;color:var(--muted)}
.st-ico{width:28px;height:28px;color:var(--c)}
.st-x{position:relative;width:40px;height:40px;border-radius:50%;background:var(--bg);flex:none;transition:background .25s,transform .35s var(--ease)}
.st-x::before,.st-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.st-x::after{transform:rotate(90deg)}
.st[open] .st-x{background:var(--c)}
.st[open] .st-x::before{background:#fff}
.st[open] .st-x::after{transform:rotate(0);background:#fff}
.st summary:hover .st-x{transform:scale(1.06)}
@media (max-width:599px){.st summary{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:16px 16px 16px 22px}.st-ico{display:none}}

.st-body{display:grid;gap:24px;padding:4px 30px 30px;animation:st-in .45s var(--ease)}
@keyframes st-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:900px){.st-body{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;padding:4px 30px 32px 101px}}
@media (max-width:599px){.st-body{padding:0 18px 22px 22px}}
.st-body>p{color:var(--muted);font-size:clamp(1rem,.97rem + .15vw,1.0938rem);line-height:1.7}
.st-side{display:grid;gap:12px;align-content:start;padding:22px;border-radius:var(--r2);background:var(--bg)}
.st-k{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-list{display:grid;gap:8px}
.st-list li{position:relative;padding-left:24px;font-weight:600;font-size:.9688rem;line-height:1.4}
.st-list li::before{content:"";position:absolute;left:0;top:.22em;width:14px;height:14px;border-radius:50%;border:4px solid var(--c)}
.st-out{padding-top:12px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink)}
.st-link{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;min-height:44px;font-weight:700;color:var(--blue);text-decoration:none}
.st-link svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.st-link:hover svg{transform:translateX(3px)}

/* Leistungsliste auf weißem Grund */
.white .sub-list a{background:var(--bg)}

@media (prefers-reduced-motion:reduce){
  .pr-chev::after{animation:none;display:none}
  .st-body{animation:none}
}