/* Bewegung auf allen Seiten: Ladeanimation „wird gestimmt“, Seitenwechsel, Einblenden beim Scrollen,
   Logo, Hover-Details. Trommel und Ablauf von der WordPress-Seite übernommen (Elementor „Page Loader“).
   Alles Bewegte nur mit transform/opacity/clip-path; bei „weniger Bewegung“ bleibt die Seite ruhig. */

/* ---------- Ladeanimation ---------- */
.jk-loader {
  --jk-spin: 4.2s;
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  opacity: 1; visibility: visible;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
  animation: jk-loader-notbremse 0s linear 3s forwards; /* falls das Skript fehlt oder hängt */
}
.jk-loader::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.jk-loader[hidden] { display: none; }
.jk-loader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .4s;
}
.jk-loader.is-leaving {
  opacity: 1; visibility: visible; pointer-events: auto; animation: none;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
@keyframes jk-loader-notbremse { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Seitenwechsel innerhalb der Sitzung: die Kopfzeile bleibt liegen, nur das „Blatt“ darunter wechselt */
html.jk-folgebesuch .jk-loader:not(.is-first), .jk-loader.is-leaving { top: var(--header-h); }

.jk-loader__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  opacity: 0; translate: 0 6px;
  animation: jk-loader-zeigen .6s cubic-bezier(.22, .61, .36, 1) .3s forwards;
}
.jk-loader.is-first .jk-loader__inner { animation-delay: .05s; }
.jk-loader.is-done .jk-loader__inner { animation-play-state: paused; }
@keyframes jk-loader-zeigen { to { opacity: 1; translate: 0 0; } }

/* Trommel: Kontur als SVG, dahinter drehen sich die Daubenlinien (3D ohne Perspektive = flach) */
.jk-ladetrommel { position: relative; width: 64px; height: 50px; }
.jk-ladetrommel__koerper {
  position: absolute; left: 2px; top: 9px; width: 60px; height: 40px;
  transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(-16deg);
}
.jk-ladetrommel__dreh { position: absolute; inset: 0; transform-style: preserve-3d; animation: jk-trommel-dreh var(--jk-spin) linear infinite; }
.jk-ladetrommel__daube {
  position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; margin-left: -.5px;
  background: var(--ink); opacity: .45; backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 30deg)) translateZ(30px);
}
.jk-ladetrommel__daube.is-bock { opacity: 1; background: transparent; }
.jk-ladetrommel__daube.is-bock::before { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: .45; }
.jk-ladetrommel__daube.is-bock::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 9px; margin: -4.5px 0 0 -1.5px;
  border-radius: 1.5px; background: var(--rust);
}
.jk-ladetrommel__linie {
  position: absolute; left: 0; top: 0; width: 64px; height: 50px; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.jk-ladetrommel__linie .is-duenn { stroke-width: .8; opacity: .55; }
@keyframes jk-trommel-dreh { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
/* Stimmgerät: Skala aus Haarlinien, die Rost-Nadel pendelt und rastet ein, wenn die Seite bereit ist */
.jk-stimmer { position: relative; width: 56px; height: 10px; margin: -12px 0 -14px; background: repeating-linear-gradient(90deg, rgb(31 30 28 / .35) 0 1px, transparent 1px 6.875px) 0 100% / 56px 4px no-repeat; }
.jk-stimmer::after { content: ""; position: absolute; left: 27.5px; bottom: 0; width: 1px; height: 7px; background: rgb(31 30 28 / .5); transition: background-color .2s; }
.jk-stimmer i { position: absolute; left: 27.5px; bottom: 0; width: 1px; height: 11px; background: var(--rust); transform-origin: 50% 100%; animation: jk-tuner 1.6s ease-in-out infinite; }
.jk-loader.is-gestimmt .jk-stimmer i { animation: none; transition: rotate .35s cubic-bezier(.34, 1.56, .64, 1); }
.jk-loader.is-gestimmt .jk-stimmer::after { background: var(--rust); }
.jk-loader.is-gestimmt .jk-loader__label { color: var(--rust); }
@keyframes jk-tuner { 0%, 100% { rotate: -14deg; } 18% { rotate: 9deg; } 36% { rotate: -6deg; } 54% { rotate: 11deg; } 72% { rotate: -3deg; } 86% { rotate: 6deg; } }
.jk-loader__label { margin: 0; color: var(--ink-muted); font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .24em; text-transform: uppercase; }

/* Solange geladen wird, warten Einblende-Animationen */
html.jk-laedt .jk-wartet-auf-loader, html.jk-laedt .jk-wartet-auf-loader *,
html.jk-laedt .jk-logo .jk-bst, html.jk-laedt .jk-logo .jk-oe i, html.jk-laedt .jk-seitenkopf > *, html.jk-laedt .jk-pk-kopf > * { animation-play-state: paused !important; }

/* Seitenköpfe legen sich nach dem Laden auf (nur Bewegung, keine Ausblendung: sie sind sofort sichtbar) */
@media (prefers-reduced-motion: no-preference) {
  .jk-js .jk-seitenkopf > *, .jk-js .jk-pk-kopf > * { animation: jk-auflegen 1.1s cubic-bezier(.22, .61, .36, 1) both; }
  .jk-js .jk-seitenkopf > :nth-child(2), .jk-js .jk-pk-kopf > :nth-child(2) { animation-delay: .08s; }
  .jk-js .jk-seitenkopf > :nth-child(3), .jk-js .jk-pk-kopf > :nth-child(3) { animation-delay: .16s; }
  .jk-js .jk-seitenkopf > :nth-child(n+4), .jk-js .jk-pk-kopf > :nth-child(n+4) { animation-delay: .24s; }
}
@keyframes jk-auflegen { from { translate: 0 22px; } to { translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .jk-ladetrommel__dreh { animation-play-state: paused; }
  .jk-stimmer i { animation: none; }
  .jk-loader__inner { translate: 0 0; }
}

/* ---------- Einblenden beim Scrollen (bewegung.js setzt .jk-auf, sichtbar → .ist-da) ---------- */
.jk-bewegung .jk-auf--hoch { opacity: 0; }
.jk-bewegung .jk-auf--bild { clip-path: inset(100% 0 0 0); }
.jk-bewegung .jk-auf--hoch.ist-da { animation: jk-auf-hoch .95s cubic-bezier(.22, .61, .36, 1) var(--jk-verz, 0s) both; }
.jk-bewegung .jk-auf--bild.ist-da { animation: jk-auf-bild 1.2s cubic-bezier(.65, 0, .35, 1) var(--jk-verz, 0s) both; }
.jk-bewegung .jk-auf--bild.ist-da img, .jk-bewegung .jk-auf--bild.ist-da video { animation: jk-auf-zoom 1.7s cubic-bezier(.22, .61, .36, 1) var(--jk-verz, 0s) both; }
@keyframes jk-auf-hoch { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes jk-auf-bild { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jk-auf-zoom { from { scale: 1.08; } to { scale: 1; } }
@media print { .jk-auf { opacity: 1 !important; clip-path: none !important; animation: none !important; } }

/* Hervorgehobene Wörter in Statements: von Hand unterstrichen, der Strich wird beim Einblenden gezogen.
   Lage ab der Oberkante gemessen: Instrument Serif hat .99em Oberlänge und .31em Unterlänge – der Strich sitzt knapp
   unter der Grundlinie statt unter den Unterlängen (sonst zu tief und in der nächsten Zeile). Jede Zeile bekommt ihren Strich. */
.jk-statement em {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C22 3.1 41 6.4 61 4.6S99 2.6 118 4.1' fill='none' stroke='%238c5b45' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3C/svg%3E") no-repeat 0 .97em / 100% .2em;
}
.jk-bewegung .jk-auf.ist-da em { animation: jk-strich .9s cubic-bezier(.65, 0, .35, 1) calc(var(--jk-verz, 0s) + .55s) both; }
@keyframes jk-strich { from { background-size: 0% .2em; } to { background-size: 100% .2em; } }

/* ---------- Logo „JONNY kölbl“ ---------- */
.jk-bst { display: inline-block; }
.jk-logo { -webkit-touch-callout: none; }
/* ö-Punkte als eigene Elemente (bewegung.js misst die Grundlinie; Lage aus dem Glyph von Instrument Serif Italic) */
.jk-oe { position: relative; }
.jk-oe i { position: absolute; top: calc(var(--oe-basis, .8em) - .712em); left: .1505em; width: .104em; height: .104em; border-radius: 50%; background: currentColor; }
.jk-oe i + i { left: .341em; }
@media (prefers-reduced-motion: no-preference) {
  /* Hover/Fokus (oder „kölbl“ tippen): die zwei Punkte trommeln einen kurzen Wirbel */
  .jk-wirbelt .jk-oe i { animation: jk-wirbel .09s ease-in-out 4 alternate; }
  .jk-wirbelt .jk-oe i + i { animation-delay: .09s; }
  /* Erster Besuch: das Logo schreibt sich nach dem Stimmen der Trommel */
  .jk-erstbesuch .jk-header .jk-logo__first .jk-bst { animation: jk-logo-auf .7s cubic-bezier(.22, .61, .36, 1) calc(var(--n) * 50ms + .1s) both; }
  .jk-erstbesuch .jk-header .jk-logo__name .jk-bst { animation: jk-logo-schreiben .8s cubic-bezier(.22, .61, .36, 1) calc(var(--n) * 70ms + .35s) both; }
  .jk-erstbesuch .jk-header .jk-oe i { animation: jk-punkt-fallen .45s cubic-bezier(.34, 1.56, .64, 1) 1.05s both; }
  .jk-erstbesuch .jk-header .jk-oe i + i { animation-delay: 1.13s; }
}
@keyframes jk-wirbel { to { translate: 0 .07em; } }
@keyframes jk-punkt-fallen { from { opacity: 0; translate: 0 -.4em; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .jk-logo:hover .jk-oe i { background: var(--rust); } }
@keyframes jk-logo-auf { from { opacity: 0; translate: 0 .45em; } to { opacity: 1; translate: 0 0; } }
@keyframes jk-logo-schreiben { from { opacity: 0; translate: -.12em 0; rotate: -12deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* ---------- Fortschrittslinie unter dem Header ---------- */
.jk-fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rust); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.jk-header.is-scrolled .jk-fortschritt { opacity: .85; }
.jk-header.is-open .jk-fortschritt { opacity: 0; }

/* ---------- Hover-Details ---------- */
.jk-pfeil { display: inline-block; transition: translate .35s cubic-bezier(.34, 1.56, .64, 1); }
a:hover .jk-pfeil--r, button:hover .jk-pfeil--r { translate: .28em 0; }
a:hover .jk-pfeil--l, button:hover .jk-pfeil--l { translate: -.28em 0; }
a:hover .jk-pfeil--o, button:hover .jk-pfeil--o { translate: 0 -.22em; }
.jk-arr { transition: translate .35s cubic-bezier(.34, 1.56, .64, 1); }
a:hover .jk-arr { translate: .12em -.12em; }

/* Textlinks: die Rost-Linie wird beim Hover neu gezogen */
.jk-link { border-bottom-color: transparent; background: linear-gradient(var(--rust), var(--rust)) no-repeat 0 100% / 100% 1px; transition: color .2s, background-size .45s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) {
  .jk-link:hover { animation: jk-linie-neu .6s cubic-bezier(.65, 0, .35, 1); }
}
@keyframes jk-linie-neu { 0% { background-position: 100% 100%; background-size: 100% 1px; } 45% { background-position: 100% 100%; background-size: 0% 1px; } 46% { background-position: 0 100%; background-size: 0% 1px; } 100% { background-position: 0 100%; background-size: 100% 1px; } }

/* Hauptmenü: Haarlinie wächst unter dem Wort */
@media (min-width: 961px) {
  .jk-nav a { position: relative; }
  .jk-nav a::after { content: ""; position: absolute; left: var(--space-14); right: var(--space-14); bottom: 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
  .jk-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .jk-nav a[aria-current]::after { transform: scaleX(1); }
}
/* Handy-Menü: Einträge kommen nacheinander */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .jk-header.is-open .jk-nav > * { animation: jk-menue-auf .5s cubic-bezier(.22, .61, .36, 1) both; }
  .jk-header.is-open .jk-nav > :nth-child(2) { animation-delay: .04s; }
  .jk-header.is-open .jk-nav > :nth-child(3) { animation-delay: .08s; }
  .jk-header.is-open .jk-nav > :nth-child(4) { animation-delay: .12s; }
  .jk-header.is-open .jk-nav > :nth-child(5) { animation-delay: .16s; }
  .jk-header.is-open .jk-nav > :nth-child(6) { animation-delay: .2s; }
  .jk-header.is-open .jk-nav > :nth-child(7) { animation-delay: .26s; }
}
@keyframes jk-menue-auf { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }

/* Projektkarten: das Foto hebt sich wie ein Abzug vom Tisch */
.jk-card__frame { transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1), translate .5s cubic-bezier(.34, 1.56, .64, 1), background-color .35s; }
.jk-card:hover .jk-card__frame { rotate: -1.2deg; translate: 0 -4px; background-color: var(--sand); }
.jk-karten .jk-card:nth-child(even):hover .jk-card__frame { rotate: 1deg; }
.jk-work__img { transition: filter .5s; }
.jk-work:hover .jk-work__img { filter: none; }

/* Social-Icons hüpfen kurz */
.jk-social a svg, .jk-nav__social a svg { transition: translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.jk-social a:hover svg, .jk-nav__social a:hover svg { translate: 0 -2px; }

/* Warenkorb: hüpft, wenn etwas dazukommt (seite.js setzt .jk-hupf) */
.jk-cart.jk-hupf svg { animation: jk-hupf .6s cubic-bezier(.36, .07, .19, .97); }
.jk-cart.jk-hupf .jk-cart__badge { animation: jk-hupf-badge .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes jk-hupf { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; translate: 0 -3px; } 50% { rotate: 8deg; } 75% { rotate: -4deg; } }
@keyframes jk-hupf-badge { from { scale: .2; } to { scale: 1; } }

/* Footer: „gestimmt auf 440 Hz“ spielt den Kammerton */
.jk-footer__kolophon { font-size: 11px; }
.jk-stimmgabel { display: inline-block; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgb(207 201 190 / .35); text-underline-offset: 3px; transition: color .2s; }
.jk-stimmgabel:hover { color: var(--inverse-ink); }
.jk-stimmgabel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.jk-stimmgabel.ist-am-klingen { color: var(--inverse-ink); }
@media (prefers-reduced-motion: no-preference) { .jk-stimmgabel.ist-am-klingen { animation: jk-gabel .07s linear 24 alternate; } }
@keyframes jk-gabel { from { translate: -.6px 0; } to { translate: .6px 0; } }
@media (pointer: coarse) { .jk-stimmgabel { position: relative; } .jk-stimmgabel::after { content: ""; position: absolute; inset: -14px -6px; } }

/* „bumm“ getippt */
.jk-bumm { position: fixed; left: 50%; bottom: 16vh; z-index: 60; pointer-events: none; font-family: var(--font-serif); font-style: italic; font-size: 48px; line-height: 1; color: var(--rust); animation: jk-bumm .9s ease-out forwards; }
@keyframes jk-bumm { 0% { opacity: 0; translate: -50% 0; rotate: -8deg; scale: .6; } 25% { opacity: 1; } 100% { opacity: 0; translate: -40% -60px; rotate: -3deg; scale: 1.1; } }

/* Knöpfe geben beim Drücken nach */
.jk-btn:active { translate: 0 1px; }

/* Auswahlfarbe passend zum Papier */
::selection { background: var(--sand); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .jk-pfeil, .jk-arr, .jk-card__frame, .jk-social a svg { transition: none; }
  a:hover .jk-pfeil, a:hover .jk-arr, .jk-card:hover .jk-card__frame { translate: none; rotate: none; }
  .jk-link:hover { animation: none; }
}