/* KFZ-Bartels: Bewegungseffekte (V407). Alle Effekte sind aus, wenn "weniger Bewegung" oder der Kontrastmodus (A+) aktiv ist. */
:root{--fx-ease:cubic-bezier(.16,1,.3,1);--fx-acc:#b8793a;--fx-accg:rgba(184,121,58,.22);}

/* 1. Fortschrittsbalken */
.kb-fx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:99990;pointer-events:none;background:transparent;}
.kb-fx-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#d9a96a,#b8793a 60%,#7e4f23);}

/* 2. Einblenden: aus der Unschärfe, von unten (ersetzt die schlichte Einblendung) */
html.kb-fx .kb-reveal{opacity:0;transform:translateY(30px);filter:blur(7px);transition:opacity 1s var(--fx-ease),transform 1.15s var(--fx-ease),filter 1s var(--fx-ease);}
html.kb-fx .kb-reveal.in{opacity:1;transform:none;filter:none;}
html.kb-fx-off .kb-reveal,html.kb-fx-off .kb-reveal.in{opacity:1 !important;transform:none !important;filter:none !important;}
@media print{html .kb-reveal{opacity:1 !important;transform:none !important;filter:none !important;}}

/* 5. Lichtkegel im Titelbereich */
.kb-fx-spot-host{position:relative;isolation:isolate;}
.kb-fx-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px circle at var(--sx,50%) var(--sy,30%),var(--fx-accg),transparent 62%);}
#top.kb-fx-spot-host .kb-fx-spot{z-index:1;mix-blend-mode:screen;background:radial-gradient(620px circle at var(--sx,50%) var(--sy,30%),rgba(212,173,98,.20),transparent 62%);}

/* 6. Neigung zur Maus, 9. Parallax */
.kb-fx-tilt{transform:perspective(1400px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));transition:transform .25s ease-out;will-change:transform;}
.kb-fx-par img,img.kb-fx-par{transform:translate3d(0,var(--py,0px),0) scale(1.1);will-change:transform;}

/* 7. Magnetische Knöpfe */
.kb-fx-mag{will-change:transform;}

/* 10. Rotierendes Siegel */
.kb-fx-badge{position:absolute;right:16px;top:16px;width:104px;height:104px;z-index:5;pointer-events:none;color:#fff;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));}
.kb-fx-badge .disc{position:absolute;inset:0;border-radius:50%;background:linear-gradient(145deg,#d9a96a,#9a622a);}
.kb-fx-badge svg{position:absolute;inset:0;width:100%;height:100%;will-change:transform;}
.kb-fx-badge text{font:600 8.6px "IBM Plex Mono",monospace;letter-spacing:.16em;fill:#1b1206;text-transform:uppercase;}
.kb-fx-badge b{position:absolute;inset:0;display:grid;place-items:center;font:700 25px "IBM Plex Mono",monospace;color:#1b1206;}

/* 11. Laufband der Marken */
.kb-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.kb-marquee-track{display:flex;align-items:center;gap:52px;width:max-content;animation:kbMarq 70s linear infinite;padding:6px 0;}
.kb-marquee:hover .kb-marquee-track{animation-play-state:paused;}
.kb-marquee-track a{display:flex;align-items:center;justify-content:center;flex:none;}
.kb-marquee-track img{height:32px;width:auto;max-width:130px;object-fit:contain;filter:brightness(0) opacity(.62);transition:filter .3s,transform .3s;}
.kb-marquee-track a:hover img,.kb-marquee-track a:focus-visible img{filter:none;transform:scale(1.12);}
@keyframes kbMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
html.kb-fx-off .kb-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
html.kb-fx-off .kb-marquee-track{animation:none;}

/* 12. Ablauf-Schritte leuchten beim Scrollen nacheinander auf */
html.kb-fx .kb-protocol-strip .step,html.kb-fx .kb-uu-steps .step{transition:filter .6s ease,box-shadow .6s ease,transform .6s var(--fx-ease);filter:saturate(.72) brightness(.94);}
html.kb-fx .kb-protocol-strip .step.kb-fx-on,html.kb-fx .kb-uu-steps .step.kb-fx-on{filter:none;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 26px 40px -22px rgba(0,0,0,.65);}
.kb-fx-stepbar{height:3px;border-radius:3px;background:rgba(28,30,27,.12);margin:12px 0 0;overflow:hidden;}
.kb-fx-stepbar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#d9a96a,#b8793a);}

/* 13. 3D-Schlüssel (Startseite) */
.kb-fx-3d{position:absolute;right:max(104px,calc((100vw - 1280px)/2 + 104px));top:50%;transform:translateY(-46%);width:min(32vw,460px);aspect-ratio:1/1.02;z-index:3;border:1px solid rgba(255,255,255,.2);border-radius:26px;background:radial-gradient(ellipse at 50% 35%,rgba(212,173,98,.14),rgba(8,9,7,.55) 70%);backdrop-filter:blur(3px);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);}
.kb-fx-3d .host{position:absolute;inset:0;}
.kb-fx-3d .lbl{position:absolute;top:14px;left:14px;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.06em;color:#cfd0c8;padding:5px 11px;border:1px solid rgba(255,255,255,.25);border-radius:99px;z-index:2;background:rgba(8,9,7,.35);}
.kb-fx-3d .pos{position:absolute;left:18px;bottom:14px;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.06em;color:#cfd0c8;z-index:2;}
.kb-fx-3d .pos b{display:block;font:700 24px/1.15 "IBM Plex Mono",monospace;color:#e7bb82;margin-top:2px;}
.kb-fx-3d .host{cursor:grab;touch-action:pan-y;}
.kb-fx-3d canvas{display:block;width:100%;height:100%;}

/* Intro (standardmäßig aus) */
.kb-fx-intro{position:fixed;inset:0;z-index:99999;background:#0b0c0a;color:#eeede7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:transform 1s var(--fx-ease);font-family:"IBM Plex Mono",monospace;}
.kb-fx-intro .nd{width:120px;height:60px;border-top-left-radius:120px;border-top-right-radius:120px;border:2px solid rgba(238,237,231,.3);border-bottom:none;position:relative;}
.kb-fx-intro .nd i{position:absolute;left:50%;bottom:-2px;width:3px;height:54px;background:#d4ad62;transform-origin:50% 100%;transform:rotate(-60deg);}
.kb-fx-intro .ct{font-size:34px;letter-spacing:.1em;}
.kb-fx-intro .nm{font:700 22px "Space Grotesk",sans-serif;letter-spacing:.02em;}

/* Schalter: alles aus bei "weniger Bewegung" / A+ */
html.kb-fx-off .kb-fx-spot,html.kb-fx-off .kb-fx-badge svg,html.kb-fx-off .kb-fx-3d,html.kb-fx-off .kb-fx-progress{display:none !important;}
html.kb-fx-off .kb-fx-badge{display:none;}
@media (max-width:1179px){.kb-fx-3d{display:none;}}
@media (max-width:640px){.kb-fx-badge{width:78px;height:78px;right:10px;top:10px;} .kb-fx-badge b{font-size:19px;} .kb-fx-badge text{font-size:9.4px;}}
@media (prefers-reduced-motion:reduce){.kb-marquee-track{animation:none;} .kb-marquee{overflow-x:auto;} html .kb-reveal{opacity:1 !important;transform:none !important;filter:none !important;}}

/* V410: Die Überschrift im Cookie-Hinweis war dunkel auf Schwarz (Grund-Stylesheet färbt Texte mit inline color:#fff dunkel) */
#kbCookieBanner .kb-cookie-titel,#kbCookieBanner p:first-child{color:#fff !important;}