/* Angebot als Kurs (26.10.2026): Preisbereiche der Branchenseiten als Scroll-Erlebnis.
   Fächer  [data-ak-faecher]:       mehrere Preiskarten liegen gestapelt und fächern beim Scrollen auf (Desktop),
                              auf dem Handy steigen sie an einer senkrechten Kurslinie auf.
   Route   [data-ak-route]: eine Liste (Fakten, Häkchen) wird zur Route mit Bojen, Preis [data-ak-preis] zählt hoch.
   Nur translate/scale/rotate (nicht transform), damit der Hover-Effekt von [data-glanz] bleibt.
   Ohne JS oder bei reduzierter Bewegung: alles statisch und vollständig sichtbar. Linie und Bojen setzt das Skript. */

[data-ak-faecher], [data-ak-route] { position: relative; }
.ak-eltern { position: relative; }
[data-ak-faecher] [class*="__preis"] strong, [data-ak-preis] { font-variant-numeric: tabular-nums; }

.ak-kurs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ak-kurs__spur { position: absolute; border-radius: 2px; background: rgba(184, 146, 74, .22); }
.ak-kurs__spur::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #b8924a, #e8c98c);
  transform-origin: left center; transform: scaleX(var(--kurs, 1));
}
.ak-kurs--senkrecht .ak-kurs__spur::after {
  background: linear-gradient(180deg, #b8924a, #e8c98c);
  transform-origin: center top; transform: scaleY(var(--kurs, 1));
}
.ak-kurs__boje {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px rgba(184, 146, 74, .45);
  transition: background .5s ease, box-shadow .5s ease, scale .5s cubic-bezier(.2, .7, .2, 1);
}
.ak-kurs__boje::after {
  content: attr(data-weg); position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0;
  white-space: nowrap; font: 700 11px/1 var(--body, inherit); letter-spacing: .14em; text-transform: uppercase;
  color: var(--hs26-muted, #5b6672); transition: color .5s ease;
}
.ak-kurs--senkrecht .ak-kurs__boje::after { display: none; }
.ak-eltern > .ak-kurs--senkrecht, [data-ak-rahmen] > .ak-kurs--senkrecht, .ak-kurs--senkrecht { z-index: 3; }
.ak-kurs__boje.an { background: #d4b06f; box-shadow: 0 0 0 6px rgba(212, 176, 111, .2), 0 0 22px rgba(212, 176, 111, .55); scale: 1.12; }
.ak-kurs__boje.an::after { color: var(--hs26-brass-text, #8a6a2c); }
.ak-kurs__boje--doppelt::after { display: none; }
/* Dunkle Abschnitte (z. B. Standortseiten fl4-leistung): helle Beschriftung, dunkle Bojen */
[data-ak-dunkel] .ak-kurs__spur { background: rgba(232, 201, 140, .24); }
[data-ak-dunkel] .ak-kurs__boje { background: #0e2537; box-shadow: inset 0 0 0 2px rgba(232, 201, 140, .55); }
[data-ak-dunkel] .ak-kurs__boje::after { color: rgba(255, 255, 255, .62); }
[data-ak-dunkel] .ak-kurs__boje.an { background: #e0bd7c; box-shadow: 0 0 0 6px rgba(224, 189, 124, .18), 0 0 24px rgba(224, 189, 124, .55); }
[data-ak-dunkel] .ak-kurs__boje.an::after { color: #e8c98c; }

/* ---------- Fächer ---------- */
html body [data-ak-faecher] > :not(.ak-kurs) { order: 0; }
@media (min-width: 761px) {
  html body [data-ak-faecher][data-me-aus] { margin-top: 104px; }
  [data-ak-faecher] > :not(.ak-kurs) { position: relative; z-index: 1; }
  [data-ak-faecher] > :is([class*="--festpreis"], [data-ak-oben]) { z-index: 2; }
  body.pt-hotel4 #starter { scroll-margin-top: 170px; }
  html.ak-an [data-ak-faecher] > :not(.ak-kurs) {
    will-change: translate, rotate, scale;
    translate: calc((1 - var(--q, 1)) * var(--dx, 0px)) calc((1 - var(--q, 1)) * (var(--dy, 0px) + 36px));
    rotate: calc((1 - var(--q, 1)) * var(--rot, 0deg));
  }
  html.ak-an [data-ak-faecher] > :is([class*="--festpreis"], [data-ak-oben]) {
    translate: calc((1 - var(--q, 1)) * var(--dx, 0px)) calc((1 - var(--q, 1)) * var(--dy, 0px) + var(--q, 1) * -14px);
    rotate: 0deg;
    scale: calc(.95 + .05 * var(--q, 1));
  }
}
@media (max-width: 760px) {
  html body [data-ak-faecher][data-me-aus] { padding-left: 30px; row-gap: 28px; }
  html.ak-an [data-ak-faecher] > :not(.ak-kurs) {
    will-change: translate, scale, opacity;
    translate: 0 calc((1 - var(--p, 1)) * 56px);
    scale: calc(.93 + .07 * var(--p, 1));
    opacity: calc(.3 + .7 * var(--p, 1));
  }
}

/* ---------- Route ---------- */
html body [data-ak-route][data-ak-route][data-ak-route] { padding-left: 42px; }
html body [data-ak-route][data-ak-einspaltig] { display: block; }
html body [data-ak-route][data-ak-einspaltig] > * + * { margin-top: 14px; }
@media (min-width: 761px) {
  html body [data-ak-rahmen] { align-items: start; }
  html body [data-ak-stehen][data-ak-stehen] { position: sticky; top: 130px; align-self: start; }
}
html.ak-an [data-ak-route] > * {
  translate: 0 calc((1 - var(--p, 1)) * 30px);
  opacity: calc(.35 + .65 * var(--p, 1));
}

/* Tabellen in Ratgeber-Artikeln: Linie links neben dem (seitlich scrollbaren) Tabellenrahmen, Zeilen blenden auf */
html body [data-ak-tabelle][data-ak-tabelle] { margin-left: 36px; }
html.ak-an [data-ak-tabelle] tbody tr { opacity: calc(.35 + .65 * var(--p, 1)); transition: opacity .2s linear; }
@media (max-width: 760px) {
  html body [data-ak-tabelle][data-ak-tabelle] { margin-left: 28px; }
}

/* Preisrahmen der w3-Branchenseiten: Preis bleibt stehen, die Fakten ziehen als Route vorbei */
html body .hs26-w3-preisrahmen[data-ak-rahmen] { overflow: clip; position: relative; top: auto; }
html body .hs26-w3-preisrahmen[data-ak-rahmen] .pr-fakten[data-ak-route] {
  display: block; overflow: visible; scroll-snap-type: none;
}
html body .hs26-w3-preisrahmen[data-ak-rahmen] .pr-fakten[data-ak-route] > div {
  width: auto; min-width: 0; max-width: none; flex: none; scroll-snap-align: none;
}
@media (min-width: 761px) {
  html body .hs26-w3-preisrahmen[data-ak-rahmen] { align-items: start; }
  html body .hs26-w3-preisrahmen[data-ak-rahmen] .pr-preis { position: sticky; top: 130px; align-self: start; }
  html body .hs26-w3-preisrahmen[data-ak-rahmen] .pr-fakten[data-ak-route] > div { padding: 18px 0 22px; }
}
@media (max-width: 760px) {
  html body .hs26-w3-preisrahmen[data-ak-rahmen] .pr-fakten[data-ak-route] { padding: 8px 0 4px 38px; }
  html body .hs26-w3-preisrahmen[data-ak-rahmen] .pr-fakten[data-ak-route] > div { padding: 14px 0 18px; }
}

/* Preiskarte Handwerk-Website: Häkchen als Route */
@media (max-width: 760px) {
  html body .p26-hw-preiskarte .p26-check[data-ak-route] { display: block; }
}