/* =====================================================================
   fx.css — Bewegungs-Bausteine, nachgebaut nach fancycomponents.dev

   Warum nachgebaut und nicht eingebunden: die Vorlagen sind React +
   Framer Motion + Tailwind. Diese Seite hat keins davon. Das Verhalten
   ist dasselbe, der Preis ist ein paar Kilobyte statt 300.

   Regel fuer alle: ohne JavaScript sieht man den Endzustand, nicht den
   Anfangszustand. Eine Seite, die ohne Skript leer ist, ist kaputt.
   ===================================================================== */

/* --- 1) vertical-cut-reveal ---------------------------------------
   Woerter steigen hinter einer Kante hervor. Die Kante ist echt: der
   aeussere Span schneidet, der innere faehrt. */
.fx-cut{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.08em;margin-bottom:-.08em}
.fx-cut > i{display:inline-block;font-style:inherit;
  translate:0 105%;
  transition:translate .82s cubic-bezier(.16,1,.3,1) var(--fx-halt,0ms)}
.fx-an .fx-cut > i{translate:0 0}

/* --- 2) scramble-in ------------------------------------------------
   Nur Breite reservieren, damit nichts springt, waehrend die Zeichen
   noch wechseln. */
[data-fx~="scramble"]{white-space:nowrap}

/* --- 3) number ticker ---------------------------------------------- */
[data-fx~="ticker"]{font-variant-numeric:tabular-nums}

/* --- 4) underline-to-background ------------------------------------
   Der Unterstrich waechst zur Flaeche und die Schrift kippt ins Helle.
   Reines CSS, kein Skript noetig. */
.fx-ub{position:relative;text-decoration:none;
  background-image:linear-gradient(var(--fx-ub,#B23A28),var(--fx-ub,#B23A28));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  padding:0 .18em;margin:0 -.18em;
  transition:background-size .34s cubic-bezier(.16,1,.3,1),color .34s ease}
.fx-ub:hover,.fx-ub:focus-visible{background-size:100% 100%;color:var(--paper,#ECE6D8)}

/* --- 5) text-highlighter -------------------------------------------
   Ein Marker faehrt einmal durch, wenn die Zeile ins Bild kommt. */
.fx-mark{background-image:linear-gradient(var(--fx-mark,rgba(178,58,40,.16)),
                                          var(--fx-mark,rgba(178,58,40,.16)));
  background-repeat:no-repeat;background-position:0 88%;
  background-size:0% .72em;
  padding:0 .1em;margin:0 -.1em;
  transition:background-size .9s cubic-bezier(.16,1,.3,1) var(--fx-halt,0ms)}
.fx-an .fx-mark{background-size:100% .72em}

/* --- 6) breathing-text ---------------------------------------------
   Bodoni Moda ist eine Variable Font (Achsen opsz und wght). Ohne
   Variable-Font-Unterstuetzung passiert schlicht nichts — kein Ersatz
   mit Skalierung, das saehe nach Fehler aus. */
@supports (font-variation-settings:"wght" 400){
  .fx-atem > i{display:inline-block;font-style:inherit;
    animation:fx-atem 4.6s ease-in-out infinite;
    animation-delay:calc(var(--i,0) * 92ms)}
}
@keyframes fx-atem{0%,100%{font-variation-settings:"wght" 400}
                   50%{font-variation-settings:"wght" 560}}

/* --- 7) letter-swap -------------------------------------------------
   Beim Zeigen faehrt jeder Buchstabe hoch und ein Zwilling kommt von
   unten nach. Zwei Ebenen, eine Bewegung. */
.fx-swap{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.06em;margin-bottom:-.06em}
.fx-swap > i{display:inline-block;position:relative;font-style:inherit;
  transition:translate .38s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 16ms)}
.fx-swap > i::after{content:attr(data-z);position:absolute;left:0;top:100%}
.fx-swap-in .fx-swap > i{translate:0 -100%}

/* --- 8) scramble-hover ---------------------------------------------
   braucht kein eigenes CSS, nur die Breite von oben */

/* --- 9) float -------------------------------------------------------
   Sehr kleine Amplitude. Alles darueber sieht nach Bildschirmschoner
   aus, nicht nach Redaktion. */
.fx-float{animation:fx-float var(--fx-dauer,7s) ease-in-out infinite;
  animation-delay:var(--fx-halt,0ms);will-change:transform}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* --- 10) elastic-line ----------------------------------------------
   Eine Linie, die sich zum Zeiger durchbiegt und zurueckschwingt.
   Der Pfad wird in fx.js gerechnet. */
.fx-linie{display:block;width:100%;height:var(--fx-h,64px);overflow:visible}
.fx-linie path{fill:none;stroke:var(--line,#C9C0AC);stroke-width:1.25;
  vector-effect:non-scaling-stroke}

/* --- Wer nicht will, bekommt nichts ---------------------------------
   Kein halbes Programm: alle Endzustaende sofort, keine Schleifen. */
@media (prefers-reduced-motion:reduce){
  .fx-cut > i,.fx-swap > i{translate:0 0 !important;transition:none !important}
  .fx-mark{background-size:100% .72em !important;transition:none !important}
  .fx-atem > i{animation:none !important}
  .fx-float{animation:none !important}
  .fx-ub{transition:none}
}

/* --- 12) Scrollleiste mit Abschnittsmarken ---------------------------
   Rechts am Rand, schmal, ruhig. Sie zeigt Position UND Gliederung —
   eine Leiste, die nur den Fortschritt anzeigt, sagt nichts, was die
   Systemleiste nicht auch sagt. */
.fx-leiste{position:fixed;right:14px;top:18vh;bottom:18vh;width:12px;z-index:40;
  pointer-events:none;display:flex;justify-content:center}
.fx-leiste-spur{position:relative;width:1px;height:100%;background:var(--line,#C9C0AC);opacity:.55}
.fx-leiste-griff{position:absolute;left:50%;width:3px;height:34px;margin-left:-1.5px;
  border-radius:2px;background:var(--ox,#B23A28);
  transform-origin:center;transition:background .3s ease}
.fx-leiste-marke{position:absolute;left:50%;width:7px;height:1px;margin-left:-3.5px;
  background:var(--ink-soft,#736A58);opacity:.5;
  transition:width .32s cubic-bezier(.16,1,.3,1),opacity .32s ease,background .32s ease}
.fx-leiste-marke.hier{width:13px;opacity:1;background:var(--ox,#B23A28)}
html.dunkelzone .fx-leiste-spur{background:#F4EFE4;opacity:.28}
html.dunkelzone .fx-leiste-marke{background:#F4EFE4}
@media(max-width:900px){.fx-leiste{display:none}}
@media(prefers-reduced-motion:reduce){.fx-leiste{display:none}}

/* --- 13) Galerie, ohne Kasten ---------------------------------------
   Das Bild liegt auf dem Papier. Kein Rahmen, keine Flaeche, keine
   Kaestchen um die Vorschauen und keine Kreise um die Pfeile - das
   waere Standard-Bootstrap und genau das, was hier nicht hingehoert.

   Ausgezeichnet wird ueber Deckkraft und einen Haarstrich, nicht ueber
   Umrandungen. */
.gk{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1rem,2.6vw,2.4rem);align-items:start;margin:0}
.gk-buehne{position:relative;height:clamp(150px,23vw,260px)}
.gk-bild{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
  transition:opacity .42s var(--ease)}
.gk-bild.aktiv{opacity:1}
.gk-bild img{width:100%;height:100%;object-fit:contain;display:block}

.gk-neben{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.gk-kopf{display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ox)}
.gk-bu{margin:0;font-family:var(--mono);font-size:var(--t-1);
  letter-spacing:.03em;line-height:1.6;color:var(--ink-soft)}
.gk-bu b{color:var(--ink);font-weight:500}

.gk-mini{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:auto}
.gk-mini button{position:relative;width:clamp(46px,4.8vw,66px);aspect-ratio:16/9;
  padding:0;border:0;background:none;cursor:pointer;
  opacity:.38;filter:saturate(.2);
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
.gk-mini button:hover{opacity:.75;filter:saturate(.6)}
.gk-mini button[aria-selected="true"]{opacity:1;filter:none}
/* Der aktive bekommt einen Haarstrich, keinen Rahmen. */
.gk-mini button::after{content:"";position:absolute;left:0;right:0;bottom:-.4rem;
  height:1px;background:var(--ox);scale:0 1;transform-origin:left;
  transition:scale .34s cubic-bezier(.16,1,.3,1)}
.gk-mini button[aria-selected="true"]::after{scale:1 1}
.gk-mini button:focus-visible{outline:1px solid var(--ox);outline-offset:3px}
.gk-mini img{width:100%;height:100%;object-fit:cover;display:block}

/* Bedienung: Pfeile in Tinte, nicht in Hellgrau - auf Creme war das
   vorher praktisch unsichtbar. Der Zaehler steht ZWISCHEN ihnen, damit
   die Gruppe als Navigation gelesen wird und nicht als Zierrat. */

@media(max-width:760px){
  .gk{grid-template-columns:1fr;gap:1rem}
  .gk-buehne{height:50vw}
}
@media(prefers-reduced-motion:reduce){
  .gk-bild,.gk-mini button,.gk-mini button::after,}

/* --- 14) Kartenstapel, ohne Kasten ----------------------------------
   Die Folien liegen uebereinander wie ein Deck. Weil sie sich
   ueberlappen, brauchen sie eine Kante - aber als weicher Schatten,
   nicht als gezeichneter Rahmen. Text links, Stapel rechts. */
.fk-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(1rem,2.6vw,2.4rem);align-items:start;margin:0}
.fk-stapel{position:relative;height:clamp(150px,23vw,260px);
  touch-action:pan-y;user-select:none;cursor:pointer}
.fk-karte{position:absolute;inset:0;margin:0;pointer-events:none;
  transform-origin:50% 100%;
  translate:calc(var(--o,0) * 3.6%) calc(var(--o,0) * -2.4%);
  rotate:calc(var(--o,0) * -2.1deg);
  scale:calc(1 - var(--o,0) * 0.06);
  opacity:calc(1 - var(--o,0) * 0.3);
  z-index:calc(20 - var(--o,0));
  transition:translate .5s cubic-bezier(.16,1,.3,1),rotate .5s cubic-bezier(.16,1,.3,1),
             scale .5s cubic-bezier(.16,1,.3,1),opacity .45s var(--ease)}
.fk-karte.fern{opacity:0}
.fk-karte.weg{translate:-118% 0;rotate:-9deg;scale:.88;opacity:0;
  pointer-events:none !important}
.fk-karte img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 18px rgba(27,23,20,.22))}

.fk-neben{order:-1;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.fk-kopf{display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ox)}
.fk-bu{margin:0;font-family:var(--mono);font-size:var(--t-1);
  letter-spacing:.03em;line-height:1.6;color:var(--ink-soft)}
.fk-bu b{color:var(--ink);font-weight:500}
.fk-hin{font-family:var(--mono);font-size:var(--t-1);color:var(--ink-soft);
  opacity:.55;letter-spacing:.06em}

@media(max-width:760px){
  .fk-band{grid-template-columns:1fr;gap:1rem}
  .fk-neben{order:1}
  .fk-stapel{height:50vw}
}
@media(prefers-reduced-motion:reduce){
  .fk-karte{transition:none;translate:0 0;rotate:0deg;scale:1}
  .fk-karte:not([data-o="0"]){opacity:0}
  }

/* --- Bedienung: Pfeile AN DEN BILDKANTEN -----------------------------
   Vorher standen sie klein und grau unter dem Text - man hat sie nicht
   gefunden. Jetzt sitzen sie dort, wo man bei einem Bild hinfasst:
   links und rechts an der Kante, als gefuellter Kreis in Tinte mit
   hellem Zeichen. Das ist der einzige Kasten auf der Seite, und er ist
   Absicht: eine Schaltflaeche darf aussehen wie eine. */
.gk-buehne,.fk-stapel{position:relative}
.gk-taste,.fk-taste{position:absolute;top:50%;translate:0 -50%;z-index:5;
  width:2.7rem;height:2.7rem;border-radius:50%;border:0;padding:0 0 .14em;
  background:var(--ink);color:var(--paper);
  font-family:var(--didone,Georgia),serif;font-size:1.45rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 3px 16px -4px rgba(27,23,20,.5);
  transition:background .24s var(--ease),scale .24s var(--ease),opacity .24s var(--ease)}
.gk-taste.zu,.fk-taste.zu{left:-1.35rem}
.gk-taste.vor,.fk-taste.vor{right:-1.35rem}
.gk-taste:hover:not(:disabled),.fk-taste:hover:not(:disabled){background:var(--ox);scale:1.12}
.gk-taste:disabled,.fk-taste:disabled{opacity:0;pointer-events:none}
.gk-taste:focus-visible,.fk-taste:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

/* Der Zaehler wandert zurueck in die Kopfzeile, oben rechts. */
.gk-stand,.fk-stand{margin-left:auto;font-family:var(--mono);
  font-size:var(--t-1);letter-spacing:.12em;color:var(--ink);
  font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .gk-taste.zu,.fk-taste.zu{left:.4rem}
  .gk-taste.vor,.fk-taste.vor{right:.4rem}
  .gk-taste,.fk-taste{width:2.4rem;height:2.4rem;font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){.gk-taste,.fk-taste{transition:none}}