/* ==========================================================================
   Nur Frontend: fixer Header, Motion-Zustände, Widescreen-Zoom.
   Alles respektiert prefers-reduced-motion.
   ========================================================================== */

/* Fixer Header über dem dunklen Hero, wird beim Scrollen zur Glasleiste */
.tr-header{position:fixed;top:0;left:0;right:0;transition:background .45s var(--tr-ease),padding .45s var(--tr-ease),transform .45s var(--tr-ease)}
body.admin-bar .tr-header{top:32px}
@media (max-width:782px){body.admin-bar .tr-header{top:46px}}
.tr-header.is-scrolled{background:rgba(26,42,39,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-block:12px}
.tr-header.is-hidden{transform:translateY(-110%)}

/* Ringe: Linien zeichnen sich, dann sehr langsame Drehung */
.tr-js .tr-rings.is-draw .tr-rings__e{stroke-dasharray:1;stroke-dashoffset:1}
.tr-js .tr-rings.is-draw.is-in .tr-rings__e{animation:tr-draw 2.4s var(--tr-ease) forwards;animation-delay:var(--d)}
@keyframes tr-draw{to{stroke-dashoffset:0}}
.tr-rings__spin{transform-origin:1200px 1200px;animation:tr-spin 160s linear infinite}
.tr-logo .tr-rings__spin{animation-duration:40s;animation-play-state:paused}
.tr-logo:hover .tr-rings__spin{animation-play-state:running}
@keyframes tr-spin{to{transform:rotate(360deg)}}
/* Maus-Parallax: jeder Ring bewegt sich unterschiedlich stark */
.tr-rings__g{transform:translate(calc(var(--mx,0) * (var(--i) - 3.5) * 9px),calc(var(--my,0) * (var(--i) - 3.5) * 9px));transition:transform 1.2s var(--tr-ease)}

/* Scroll-Reveal */
.tr-js .tr-r{opacity:0;transform:translateY(28px);transition:opacity 1s var(--tr-ease),transform 1s var(--tr-ease);transition-delay:var(--rd,0ms)}
.tr-js .tr-r.is-in{opacity:1;transform:none}
/* Display-Zeilen: Wort für Wort */
.tr-js .tr-words .tr-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.tr-js .tr-words .tr-w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--tr-ease);transition-delay:calc(var(--wi) * 55ms)}
.tr-js .tr-words.is-in .tr-w>span{transform:none}

/* Laufband */
.tr-marquee__track{animation:tr-marquee 38s linear infinite}
.tr-marquee.is-outline .tr-marquee__track{animation-duration:46s;animation-direction:reverse}
.tr-marquee:hover .tr-marquee__track{animation-play-state:paused}
@keyframes tr-marquee{to{transform:translateX(-50%)}}

/* Kreislauf: inaktive Schritte gedimmt */
.tr-js .tr-cycle .tr-step{opacity:.32}
.tr-js .tr-cycle .tr-step.is-active{opacity:1}
@media (max-width:781px){.tr-js .tr-cycle .tr-step{opacity:1}}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
	.tr-js .tr-r,.tr-js .tr-words .tr-w>span{opacity:1;transform:none}
	.tr-js .tr-rings.is-draw .tr-rings__e{stroke-dashoffset:0}
}

/* Große Monitore: ganze Seite wächst mit, Handy und Laptop bleiben unberührt */
@media (min-width:1600px){body{zoom:1.1}}
@media (min-width:1900px){body{zoom:1.25}}
@media (min-width:2200px){body{zoom:1.4}}
@media (min-width:2500px){body{zoom:1.55}}
@media (min-width:3000px){body{zoom:1.8}}

/* ---- 1.4.1 ---- */
/* Wort-Animation: Luft rechts, damit enge Laufweite den letzten Buchstaben nicht kappt */
.tr-js .tr-words .tr-w{padding-right:.09em;margin-right:-.09em;padding-left:.03em;margin-left:-.03em}

/* Karten-Hover: höhere Spezifität als die Scroll-Reveal-Regel (.tr-js .tr-r.is-in) */
.tr-js .tr-card.tr-r.is-in:hover,.tr-card:hover{transform:translateY(-6px);transition:transform .5s var(--tr-ease),background .45s var(--tr-ease),color .45s var(--tr-ease),border-color .45s var(--tr-ease)}

/* Ringe ~10 % dynamischer: schneller zeichnen und drehen, mehr Parallax, schnellere Reaktion */
.tr-js .tr-rings.is-draw.is-in .tr-rings__e{animation-duration:2.1s}
.tr-rings__spin{animation-duration:130s}
.tr-rings__g{transform:translate(calc(var(--mx,0) * (var(--i) - 3.5) * 11px),calc(var(--my,0) * (var(--i) - 3.5) * 11px)) rotate(calc(var(--mx,0) * (var(--i) - 3.5) * .6deg));transform-origin:1200px 1200px;transition:transform .9s var(--tr-ease)}
/* leichtes Atmen, damit die Ringe auch ohne Maus (Handy) lebendig wirken */
.tr-rings-wrap.is-hero .tr-rings{animation:tr-breathe 9s ease-in-out infinite}
@keyframes tr-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.tr-rings-wrap.is-hero .tr-rings{animation:none}}