/* "Unsere Arbeiten" as a circle: variant B (round road, machine in the middle) is used on the six
   service pages (leistungsseiten/build.py), variant A only in the preview arbeiten-kreis-a.html. The stage has a fixed 1240 px geometry and is
   scaled down as a whole by js/kern-kreis.js; below 900 px it turns into a vertical list. */

.kk { --kk-green: #017153; --kk-yellow: #FDF21E; --kk-ink: #04382A; --kk-grey: #666; --kk-bg: rgb(237, 240, 238); }

.kk .kk-wrap { position: relative; width: 100%; margin-top: 3.5rem; }
.kk .kk-stage { position: absolute; top: 0; left: 50%; width: var(--w); height: var(--h);
  transform: translateX(-50%) scale(var(--s, 1)); transform-origin: top center; }
.kk .kk-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kk h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.2; color: var(--kk-ink); }
.kk p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--kk-grey); }

/* number badge, same as the template cards: yellow disc with a dashed green edge */
.kk .kk-nr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--kk-yellow); border: 1px dashed var(--kk-green); color: var(--kk-ink); font-size: 14px; font-weight: 500; }

/* logo in the middle, on a white disc */
.kk .kk-core { position: absolute; left: 50%; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 40px 80px -40px rgba(4, 56, 42, .45), 0 0 0 1px rgba(4, 56, 42, .06); }
.kk .kk-core img { display: block; height: auto; }

/* ---------- Variant A: white cards on a dashed ring ---------- */
.kk-a .kk-ring-inner { fill: none; stroke: rgba(4, 56, 42, .12); stroke-width: 1; }
.kk-a .kk-ring-main { fill: none; stroke: var(--kk-green); stroke-width: 1.5; stroke-dasharray: 5 7; }
.kk-a .kk-core { top: 360px; width: 280px; height: 280px; margin: -140px 0 0 -140px; }
.kk-a .kk-core img { width: 150px; }
.kk-a .kk-card { position: absolute; left: var(--x); top: var(--y); width: 330px; box-sizing: border-box; padding: 26px;
  background: #fff; border-radius: 15px; display: flex; flex-direction: column; gap: 18px; }
.kk-a .kk-card-head { display: flex; align-items: center; gap: 14px; }
.kk-a .kk-card h3 { font-size: 20px; white-space: nowrap; }
.kk-a .kk-card.kk-l { text-align: right; }
.kk-a .kk-card.kk-l .kk-card-head { flex-direction: row-reverse; }
/* the card on the ring edge gets the green of the service cards on hover */
.kk-a .kk-card { transition: background-color .35s ease; }
.kk-a .kk-card:hover { background: var(--kk-green); }
.kk-a .kk-card:hover h3 { color: #fff; }
.kk-a .kk-card:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- Variant B: a round road with a yellow centre line ---------- */
.kk-b .kk-road-bed { fill: none; stroke: var(--kk-green); stroke-width: 52; }
.kk-b .kk-road-edge { fill: none; stroke: rgba(4, 56, 42, .18); stroke-width: 1; }
.kk-b .kk-road-line { fill: none; stroke: var(--kk-yellow); stroke-width: 3; stroke-dasharray: 16 14; }
.kk-b .kk-core { top: 440px; width: 380px; height: 380px; margin: -190px 0 0 -190px; }
.kk-b .kk-core img { width: 185px; }
/* paver instead of the logo: it overlaps the white disc a little and stands on a soft ground shadow */
.kk-b .kk-machine { overflow: visible; }
.kk-b .kk-machine::after { content: ""; position: absolute; left: 50%; top: 71%; width: 270px; height: 30px; margin-left: -135px;
  background: radial-gradient(closest-side, rgba(4, 56, 42, .28), rgba(4, 56, 42, 0)); z-index: 0; }
.kk-b .kk-machine img { position: relative; z-index: 1; width: auto; max-width: 315px; max-height: 240px; margin-top: -12px; }
.kk-b .kk-item { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.kk-b .kk-item .kk-nr { position: absolute; left: var(--bx); top: var(--by); transform: translate(-50%, -50%);
  width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 5px var(--kk-bg); transition: transform .3s ease; }
.kk-b .kk-item-text { position: absolute; left: var(--tx); top: var(--ty); width: 280px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; background: #fff; border-radius: 12px; text-align: left;
  box-shadow: 0 18px 40px -28px rgba(4, 56, 42, .35); }
.kk-b .kk-item-text h3 { font-size: 19px; letter-spacing: -0.3px; }
.kk-b .kk-item-text p { font-size: 15px; line-height: 1.4; }
.kk-b .kk-top .kk-item-text { width: 330px; transform: translate(-50%, -100%); }
.kk-b .kk-bottom .kk-item-text { width: 330px; transform: translate(-50%, 0); }
.kk-b .kk-r .kk-item-text { transform: translate(0, -50%); }
.kk-b .kk-l .kk-item-text { transform: translate(-100%, -50%); }
.kk-b .kk-item:hover .kk-nr { transform: translate(-50%, -50%) scale(1.15); }
.kk-b .kk-item:hover h3 { color: var(--kk-green); }

/* ---------- one reveal when the section scrolls in ---------- */
.kk-js .kk .kk-stage > svg { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity 1s ease; transform-origin: 50% 51%; }
.kk-js .kk-a .kk-stage > svg { transform-origin: 620px 360px; }
.kk-js .kk-b .kk-stage > svg { transform-origin: 620px 440px; }
.kk-js .kk:not(.kk-in) .kk-stage > svg { opacity: 0; transform: rotate(-40deg); }
.kk-js .kk .kk-core { transition: transform .9s cubic-bezier(.34, 1.4, .5, 1), opacity .6s ease; }
.kk-js .kk:not(.kk-in) .kk-core { opacity: 0; transform: scale(.7); }
.kk-js .kk .kk-card, .kk-js .kk .kk-item { transition: opacity .6s ease calc(.35s + var(--i) * .12s); }
.kk-js .kk:not(.kk-in) .kk-card, .kk-js .kk:not(.kk-in) .kk-item { opacity: 0; }
.kk-js .kk-b.kk-in .kk-road-line { animation: kk-drive 2.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes kk-drive { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kk-js .kk * { transition: none !important; animation: none !important; }
}

/* ---------- below 900 px: logo on top, the six points as a vertical list ---------- */
@media (max-width: 899px) {
  .kk .kk-wrap { height: auto !important; margin-top: 2.5rem; }
  .kk .kk-stage { position: relative; left: 0; width: auto; height: auto; transform: none;
    display: flex; flex-direction: column; gap: 12px; }
  .kk .kk-stage > svg { display: none; }
  .kk .kk-core { position: relative; top: auto; left: auto; margin: 0 auto 24px; width: 170px; height: 170px; }
  .kk .kk-core img { width: 92px; }
  .kk-b .kk-machine { width: 230px; height: 230px; }
  .kk-b .kk-machine img { width: auto; max-width: 195px; max-height: 150px; margin-top: -8px; }
  .kk-b .kk-machine::after { width: 190px; height: 22px; margin-left: -95px; }
  .kk-a .kk-card { position: relative; left: auto; top: auto; width: 100%; padding: 22px; gap: 14px; }
  .kk-a .kk-card.kk-l { text-align: left; }
  .kk-a .kk-card.kk-l .kk-card-head { flex-direction: row; }
  .kk .kk-card h3, .kk .kk-item h3 { font-size: 20px; white-space: normal; }

  /* variant B: the road runs straight down on the left, the badges sit on it */
  .kk-b .kk-stage { gap: 0; }
  .kk-b .kk-stage::before, .kk-b .kk-stage::after { content: ""; position: absolute; top: 254px; bottom: 0; }
  .kk-b .kk-stage::before { left: 4px; width: 40px; background: var(--kk-green); border-radius: 20px 20px 0 0; }
  .kk-b .kk-stage::after { left: 22.5px; width: 3px; background: repeating-linear-gradient(180deg, var(--kk-yellow) 0 14px, transparent 14px 26px); }
  .kk-b .kk-item .kk-nr { z-index: 1; }
  .kk-b .kk-item { position: relative; width: auto; height: auto; display: flex; gap: 22px; align-items: flex-start; padding: 0 0 30px 4px; }
  .kk-b .kk-item .kk-nr { position: relative; left: auto; top: auto; transform: none; width: 40px; height: 40px; }
  .kk-b .kk-item:hover .kk-nr { transform: scale(1.1); }
  .kk-b .kk-item .kk-item-text, .kk-b .kk-top .kk-item-text, .kk-b .kk-bottom .kk-item-text, .kk-b .kk-l .kk-item-text {
    position: relative; left: auto; top: auto; width: auto; transform: none; padding-top: 16px; }
  .kk-b .kk-item { padding-bottom: 14px; }
}