/* ======================================================================
   Startseite „Anwaltskanzlei Jurna – Kanzlei für Kaufrecht“ (seit 29.10.2026)
   3D-§ im Hero + Schwerpunkte-Karussell. Nur auf der Startseite geladen
   (inc/startseite-kaufrecht.php) – bewusst eigene Datei statt style.css,
   deren .min-Build sonst neu erzeugt werden müsste.
   ====================================================================== */

/* ── Hero: 3D-Paragraph mit Normen auf einer Umlaufbahn (assets/js/hero-paragraphen.js) ──
   Das § besteht aus gestapelten Text-Ebenen (translateZ) – echte Schrift, scharf
   auf jedem Bildschirm. Das Skript setzt --rx/--ry (Schwingen + Maus) und
   verteilt die Etiketten auf der Bahn; die Lichtfäden zeichnet ein Canvas
   über die volle Hero-Breite. */
.hero2--kaufrecht .kr-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;   /* Klicks gehen an Knöpfe und Links darunter */
}
.hero2--kaufrecht .hero2-inner { z-index: 1; }
.hero2--kaufrecht .hero2-media {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.kr-stage {
  --rx: 8deg;              /* Ruhelage ohne Skript */
  --ry: -22deg;
  position: relative;
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 5 / 4;
  perspective: 1100px;
  container-type: inline-size;   /* das § skaliert mit der Bühne (cqw) */
}
/* Lichthof hinter dem Objekt */
.kr-stage::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--jurna-color-primary) 55%, transparent),
    transparent 75%);
  filter: blur(18px);
  opacity: .7;
  pointer-events: none;
}

/* Umlaufbahn (flache Ellipse) */
.kr-bahn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-8deg);
  pointer-events: none;
}
.kr-bahn ellipse {
  fill: none;
  stroke: rgba(255, 255, 255, .22);
  stroke-width: .25;
  stroke-dasharray: .8 1.6;
  vector-effect: non-scaling-stroke;
}

/* Das Objekt */
.kr-objekt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  pointer-events: none;
}
.kr-schicht {
  grid-area: 1 / 1;
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(11rem, 19vw, 16.5rem);
  font-size: 68cqw;              /* füllt die Bühne auf jeder Breite */
  line-height: 1;
  transform: translateZ(calc(var(--i) * -1.6px));
  backface-visibility: hidden;
  user-select: none;
}
/* hinterste Ebene: weicher Schein nach außen */
.kr-schicht:first-child { text-shadow: 0 0 46px rgba(15, 154, 157, .55); }
/* Vorderseite: Glas-Verlauf mit wanderndem Lichtreflex */
.kr-schicht--front {
  color: transparent;
  background: linear-gradient(115deg,
    #ffffff 0%, #e6f7f6 22%, #8fdcd7 44%,
    #ffffff 52%,
    #bfeae7 62%, #3bb3b2 82%, #ffffff 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: kr-glanz 7s ease-in-out infinite;
}
@keyframes kr-glanz {
  0%, 15%  { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}

/* Normen-Etiketten auf der Bahn (Lage/Größe/Tiefe setzt das Skript) */
.kr-orbit {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.kr-stage:not(.is-animated) .kr-orbit { display: none; }
.kr-pille {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .42rem .8rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--jurna-radius-pill);
  background: rgba(13, 30, 51, .45);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 6px 22px rgba(5, 15, 28, .35);
  font-size: .84rem;
  line-height: 1.2;
  color: #fff;
  will-change: transform, opacity;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.kr-pille strong {
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  letter-spacing: .03em;
}
/* Fokus-Umlaufbahn: nur das vorderste Etikett klappt seine Bezeichnung auf */
.kr-pille {
  gap: 0;
}
.kr-pille span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  vertical-align: bottom;
  transition: max-width .45s cubic-bezier(.22, .8, .3, 1), opacity .3s ease, margin-left .45s ease;
}
.kr-pille.is-vorn span {
  max-width: 12rem;
  margin-left: .45rem;
  opacity: 1;
}
.kr-pille.is-vorn {
  border-color: color-mix(in srgb, var(--jurna-color-primary) 70%, #fff);
  background: rgba(15, 126, 129, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(15, 154, 157, .45);
}

/* Fußzeile: Ort + Pause-Knopf */
.kr-stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 30rem;
  margin-top: .75rem;
}
.kr-reach { margin: 0; color: #fff; }
.kr-reach .icon { stroke: #fff; }

.kr-pause {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
}
.kr-pause:hover,
.kr-pause:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
}
.kr-pause .icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.kr-pause .kr-play-icon { display: none; fill: currentColor; stroke: none; }
.kr-pause[aria-pressed="true"] .kr-play-icon { display: block; }
.kr-pause[aria-pressed="true"] .kr-pause-icon { display: none; }
.hero2--kaufrecht.is-pausiert .kr-schicht--front { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .kr-schicht--front { animation: none; background-position: 40% 0; }
}

/* Einspaltig (Tablet/Handy): das § steht als ruhiges, durchscheinendes
   Wasserzeichen HINTER Kicker und Überschrift – sofort im ersten Bildschirm,
   ohne den Buchungsknopf nach unten zu schieben. Etiketten und Bahn entfallen. */
@media (max-width: 56rem) {
  /* static + ohne Einblend-Animation (transform macht die Spalte sonst zum
     Bezugsrahmen): die Bühne richtet sich am Hero-Inhalt (.hero2-inner) aus. */
  .hero2--kaufrecht .hero2-media { position: static; align-items: stretch; animation: none; }
  .hero2--kaufrecht .kr-stage {
    position: absolute;
    top: clamp(.5rem, 3vw, 1.5rem);
    right: -4%;
    z-index: -1;
    width: 70%;
    max-width: 22rem;
    height: clamp(12rem, 52vw, 18rem);
    aspect-ratio: auto;
    opacity: .3;
  }
  .hero2--kaufrecht .kr-orbit,
  .hero2--kaufrecht .kr-bahn { display: none; }
  .kr-stage-foot { max-width: none; margin-top: 0; }
}

/* ── Schwerpunkte im Kaufrecht: Karussell (assets/js/schwerpunkte-karussell.js) ──
   Waagerechte Leiste mit Scroll-Snap; rechts ragt die nächste Karte ins Bild.
   Karten kippen beim Überfahren ins Kanzlei-Dunkelblau. */
.kr-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.kr-intro {
  max-width: 46rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--jurna-color-text);
}

.kr-steuerung {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.kr-steuerung[hidden] { display: none; }
.kr-zaehler {
  margin: 0 .4rem 0 0;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--jurna-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.kr-zaehler-ist { color: var(--jurna-color-ink); }
.kr-pfeil {
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--jurna-color-border);
  border-radius: 50%;
  background: var(--jurna-color-card);
  color: var(--jurna-color-ink);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.kr-pfeil:hover:not(:disabled),
.kr-pfeil:focus-visible {
  background: var(--jurna-color-navy);
  border-color: var(--jurna-color-navy);
  color: #fff;
}
.kr-pfeil:active:not(:disabled) { transform: scale(.94); }
.kr-pfeil:disabled { opacity: .4; cursor: default; }
.kr-pfeil .icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Leiste */
.kr-leiste {
  --kr-karte: clamp(16.5rem, 27vw, 20.5rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--kr-karte);
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  margin: 0;
  padding: .35rem .25rem 1.1rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  scrollbar-width: thin;
}
.kr-leiste:focus-visible {
  outline: 2px solid var(--jurna-color-primary);
  outline-offset: 4px;
  border-radius: var(--jurna-radius-lg);
}
/* Mit Skript übernehmen Knöpfe + Fortschrittsbalken die Rolle der Scrollleiste */
.kr-karussell.is-bereit .kr-leiste { scrollbar-width: none; }
.kr-karussell.is-bereit .kr-leiste::-webkit-scrollbar { display: none; }
.kr-karussell.is-ziehen .kr-leiste { scroll-snap-type: none; cursor: grabbing; }
.kr-karussell.is-ziehen .kr-card { user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .kr-karussell.is-bereit .kr-leiste { cursor: grab; }
}

/* Karte */
.kr-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 22rem;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: calc(var(--jurna-radius-lg) * 1.4);
  box-shadow: var(--jurna-shadow-sm);
  transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
/* Dunkle Ebene, die beim Überfahren einblendet (Verläufe lassen sich nicht überblenden) */
.kr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(22rem 16rem at 110% -10%,
      color-mix(in srgb, var(--jurna-color-primary) 55%, transparent), transparent 70%),
    linear-gradient(150deg, var(--jurna-color-navy), color-mix(in srgb, var(--jurna-color-navy) 70%, var(--jurna-color-primary)));
  opacity: 0;
  transition: opacity .35s ease;
}
/* Akzentlinie unten, wächst beim Überfahren */
.kr-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 2.5rem;
  background: var(--jurna-color-primary);
  transition: width .45s cubic-bezier(.22, .8, .3, 1);
}

.kr-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.kr-nummer {
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: .9;
  letter-spacing: -.02em;
  /* Gefüllt statt Kontur: Jost ist eine variable Schrift mit überlappenden
     Konturen – -webkit-text-stroke zeichnete die Überlappungen als Linien
     mitten in die Ziffern (v. a. bei der 4). */
  color: color-mix(in srgb, var(--jurna-color-primary) 24%, #fff);
  font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}
.kr-icon {
  display: inline-grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--jurna-color-primary-soft);
  transition: background-color .35s ease;
}
.kr-icon .icon {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--jurna-color-primary-dark);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s ease;
}

.kr-card-title {
  margin: 0;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--jurna-color-ink);
  transition: color .35s ease;
}
.kr-card-text {
  margin: 0;
  font-size: .97rem;
  line-height: 1.62;
  color: var(--jurna-color-text);
  transition: color .35s ease;
}
.kr-card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--jurna-color-primary-dark);
  text-decoration: none;
  transition: color .35s ease;
}
.kr-card-link::after {               /* ganze Karte klickbar */
  content: "";
  position: absolute;
  inset: 0;
}
.kr-card-link:focus-visible { outline: none; }
.kr-card:has(.kr-card-link:focus-visible) {
  outline: 2px solid var(--jurna-color-primary);
  outline-offset: 3px;
}
.kr-card-link .icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

/* Kippen ins Dunkle: bei Maus (hover) und bei Tastatur-Fokus */
.kr-card:hover,
.kr-card:focus-within {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--jurna-shadow-lg);
}
.kr-card:hover::before,
.kr-card:focus-within::before { opacity: 1; }
.kr-card:hover::after,
.kr-card:focus-within::after { width: 100%; }
.kr-card:hover .kr-nummer,
.kr-card:focus-within .kr-nummer { color: var(--jurna-color-primary-tint); }
.kr-card:hover .kr-icon,
.kr-card:focus-within .kr-icon { background: rgba(255, 255, 255, .1); }
.kr-card:hover .kr-icon .icon,
.kr-card:focus-within .kr-icon .icon { stroke: #fff; }
.kr-card:hover .kr-card-title,
.kr-card:focus-within .kr-card-title,
.kr-card:hover .kr-card-link,
.kr-card:focus-within .kr-card-link { color: #fff; }
.kr-card:hover .kr-card-text,
.kr-card:focus-within .kr-card-text { color: color-mix(in srgb, var(--jurna-color-primary-soft) 80%, #fff); }
.kr-card:hover .kr-card-link .icon { transform: translateX(4px); }

/* Abschlusskarte: dauerhaft dunkel, mit Buchungsknopf */
.kr-card--cta { border-color: transparent; }
.kr-card--cta::before { opacity: 1; }
.kr-card--cta::after { width: 100%; }
.kr-card--cta .kr-icon { background: rgba(255, 255, 255, .1); }
.kr-card--cta .kr-icon .icon { stroke: #fff; }
.kr-card--cta .kr-card-title { color: #fff; font-size: 1.35rem; }
.kr-card--cta .kr-card-text { color: color-mix(in srgb, var(--jurna-color-primary-soft) 80%, #fff); }
.kr-card-btn { margin-top: auto; align-self: flex-start; }

/* Fortschritt */
.kr-fortschritt {
  position: relative;
  height: 3px;
  margin: .4rem .25rem 0;
  border-radius: 2px;
  background: var(--jurna-color-border);
  overflow: hidden;
}
.kr-karussell:not(.is-bereit) .kr-fortschritt { display: none; }
.kr-fortschritt-balken {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  border-radius: 2px;
  background: var(--jurna-color-primary);
  transition: transform .2s linear, width .2s linear;
}

@media (max-width: 48rem) {
  .kr-leiste { --kr-karte: min(82vw, 19rem); }
  .kr-card { min-height: 20rem; }
  .kr-kopf { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .kr-card,
  .kr-card::before,
  .kr-card::after,
  .kr-fortschritt-balken { transition: none; }
}

/* Anker-Sprung aus dem Hero nicht unter die Kopfleiste */
#schwerpunkte { scroll-margin-top: 6rem; }